码迷,mamicode.com
首页 > Web开发 > 详细

JQ + CSS实现浪漫表白必备

时间:2018-02-14 13:22:30      阅读:49      评论:0      收藏:0      [点我收藏+]

标签:doctype   lin   idt   分享图片   split   document   ul li   浪漫   幸福   

 JQ + CSS实现浪漫表白必备页面

  效果图:

技术分享图片

  图片素材 :

  技术分享图片技术分享图片技术分享图片

技术分享图片技术分享图片技术分享图片

技术分享图片

技术分享图片

技术分享图片 

代码如下,复制即可使用:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浪漫表白 By:阿杜</title>

    <style type = "text/css">
        
        *{
            margin:0px;
            padding:0px;
            }
        html,body{
            height:100%;
            }    
        body{
            font-family:"微软雅黑";
        <!-- 此处需要自己修改图片路径 -->
background:url(images/b1j.jpg) no-repeat fixed; background-size:cover; } .top{ width:500px; height:150px; margin:50px auto; font-size:30px; color:#ea544d; } .box{ width:310px; height:310px; margin:0px auto; perspective:800px; margin-top:-40px; } .box .wrap{ width:210px; height:210px; position:relative; transform-style:preserve-3d; animation:play 10s linear infinite; } .box .wrap ul li{ list-style:none; position:absolute; top:0;left:0; } @keyframes play{ from{transform:rotateY(0deg);} to{transform:rotateY(360deg);} } .xin,.xin1{ position:absolute; } .xin{ animation:xin 8s linear infinite; } @keyframes xin{ 0%{top:0%;left:50%;opacity:1;} 20%{top:20%;left:80%;opacity:0;} 40%{top:50%;left:50%;opacity:1;} 60%{top:80%;left:40%;opacity:0;} 80%{top:50%;left:20%;opacity:1;} 100%{top:10%;left:0%;opacity:0;} } .xin1{ animation:xin 15s linear infinite; } @keyframes xin1{ 0%{top:10%;right:50%;opacity:1;} 20%{top:50%;right:80%;opacity:0;} 40%{top:40%;right:50%;opacity:1;} 60%{top:60%;right:40%;opacity:0;} 80%{top:50%;right:20%;opacity:1;} 100%{top:0%;right:0%;opacity:0;} } .text{ width:60%; margin:0 auto; margin-top:-60px; font-size:20px; line-height:30px; font-weight:500; animation:color 10s linear infinite; } @keyframes color{ 0%{color:#039;} 20%{color:#9C3;} 40%{color:#6C6;} 60%{color:#66F;} 80%{color:#FC9;} 100%{color:#9FF;} } </style> </head> <body> <!--S top--> <div class = "top"> <marquee behavior="alternate">Love Page By:阿杜</marquee> </div> <!--E top--> <!--S box--> <div class = "box"> <div class = "wrap">

        <!-- 此处需要自己修改图片路径 -->
<ul> <li><img src="images/1.gif" height="210px" width="210px"/></li> <li><img src="images/2.gif" height="210px" width="210px"/></li> <li><img src="images/3.gif" height="210px" width="210px"/></li> <li><img src="images/4.gif" height="210px" width="210px"/></li> <li><img src="images/5.gif" height="210px" width="210px"/></li> <li><img src="images/6.gif" height="210px" width="210px"/></li> </ul> </div> </div> <!--E box -此处需要自己修改图片路径--> <div class = "xin"> <img src="images/xin.png" width="100px" height="100px"/> </div> <div class = "xin1"> <img src="images/xin.png" width="100px" height="100px"/> </div> <div class = "text"> <p id = "test"></p> </div>
  
  <!-- 此处需要自己修改音频路径 -->
<embed src="sound/bg.mp3" hidden="true"/> <!-- 此处需要自己修改JQ路径 --> <script type = "text/javascript" src="js/jquery.min.js"></script> <script type = "text/javascript"> $(function(){ $(".wrap ul li").each(function(i){ var Deg = 360/$(".wrap ul li").size(); $(this).css({ "transform":"rotateY("+Deg*i+"deg) translateZ(220px)" }); }); }); window.onload = function autoplay(){ var b = [能够遇见你,对我来说是最大的幸福。有了你,我的生活变的无限宽广,有了你,世界变得如此迷人。你是世界,世界是你。我愿意用自己的心,好好的陪着你,爱着你。陪你到你想去的地方,用心走完我们人生的余下的旅程。在未来的日子里,也许什么都无法确定,但唯一可以确定的是,我爱的人是你,无论现在还是将来,我想我这里都会是你最温暖的港湾,都是为你遮风避雨的城墙。无论狂风,无论暴雨。我都会陪在你的身旁,让你不会感到丝毫的担心和惶恐。我会珍惜和你在一起的每一刻,每一分,每一秒。谁叫你是我最爱的人,谁叫你是第二幸福的人(因为爱上她你是最幸福的了,哈哈)。为了你,我愿用自己的双手为你撑起一片艳阳!]; // 分隔字符串 var str = b.join(""),i=0,arr = str.split(‘‘); var ms_stop = setInterval(function(){ // 设置自动出现文字 if(i>str.length-1){ i = 0; document.getElementById(test).innerHTML=‘‘; } document.getElementById(test).innerHTML=document.getElementById(test).innerHTML+arr[i]; i++; },200); } </script> </body> </html>

  如果您有更好的点子或更多的功能,可以和我们大家一起分享哦,如有错误,欢迎联系我改正,非常感谢!!!

JQ + CSS实现浪漫表白必备

标签:doctype   lin   idt   分享图片   split   document   ul li   浪漫   幸福   

原文地址:https://www.cnblogs.com/yidaixiaohui/p/8447538.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!