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实现浪漫表白必备
原文地址：https://www.cnblogs.com/yidaixiaohui/p/8447538.html