JQ + CSS實現浪漫表白必備頁面
效果圖：
圖片素材 ：
推薦：《js高級教程》
代碼如下，複製即可使用：
<!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> <div class = "top"> <marquee behavior="alternate">Love Page By:阿杜</marquee> </div> <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> <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"/> <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>