php写的告白代码,jQuery + CSS实现浪漫表白！（附代码）

本篇文章给大家介绍一下使用jQuery + CSS实现浪漫表白必备页面。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

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

效果图：

图片素材 ：

代码如下，复制即可使用：

浪漫表白 By：阿杜

*{

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;}

}

Love Page By:阿杜

　　　　　　　　

• 
• 
• 
• 
• 
• 

$(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);

}

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

更多炫酷CSS3、html5、javascript、jQuery特效代码，尽在：js特效大全