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" 

 !-- 此处需要自己修改图片路径 -- 
 

 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 

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

原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/12332.html