七夕了，为了程序员们的幸福，特此用h5和css3写了一个手机端表白神器，祝大家表白成功，哈哈。
点击此处可以查看动态效果：点击测试
下面是代码，一些引用的外部文件在网上都可以找见，我就不一一贴出来了，如果有需要可以找我要引用的外部文件也可以。图片不好上传，就在下面的上传里面一个一个传一下。也可以从下面给的网址里面找图，自己切一下。
http://www.admin5.com/article/20160708/673823.shtml
也可以从这个网站http://download.csdn.net/detail/fxss5201/9610444进行全篇下载。
<!doctype html>下面是css样式
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>Document</title>
<script src="js/base.js"></script>
<link rel="stylesheet" type="text/css" href="css/mobile-reset.css">
<link rel="stylesheet" href="css/swiper-3.3.1.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/zepto.min.js"></script>
<script src="js/swiper.animate1.0.2.min.js"></script>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide page">
<ul class="xing">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="yueliang"></div>
<ul class="niao">
<li class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s"></li>
<li class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.2s"></li>
<li class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="2s" swiper-animate-delay="0.1s"></li>
<li class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s"></li>
<li class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.1s"></li>
<li class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1.2s" swiper-animate-delay="0.3s"></li>
<li class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s"></li>
<li class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.4s" swiper-animate-delay="0.24s"></li>
<li class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="2s" swiper-animate-delay="0.5s"></li>
<li class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s"></li>
<li class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s"></li>
<li class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1.8s" swiper-animate-delay="0.2s"></li>
<li class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s"></li>
<li class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.7s" swiper-animate-delay="0.1s"></li>
<li class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="0.2s"></li>
<li class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.6s"></li>
<li class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.3s" swiper-animate-delay="0.3s"></li>
<li class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s"></li>
<li class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.9s" swiper-animate-delay="0.3s"></li>
<li class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="0.1s"></li>
<li class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1.1s" swiper-animate-delay="0.9s"></li>
<li class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s"></li>
<li class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0.2s"></li>
<li class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="2s" swiper-animate-delay="0.1s"></li>
<li class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s"></li>
<li class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="2s" swiper-animate-delay="0.1s"></li>
<li class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1.2s" swiper-animate-delay="0.3s"></li>
<li class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s"></li>
<li class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.4s" swiper-animate-delay="0.24s"></li>
<li class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="2s" swiper-animate-delay="0.5s"></li>
<li class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s"></li>
<li class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s"></li>
<li class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1.8s" swiper-animate-delay="0.2s"></li>
<li class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s"></li>
<li class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.7s" swiper-animate-delay="0.1s"></li>
<li class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="0.2s"></li>
<li class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.6s"></li>
<li class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.3s" swiper-animate-delay="0.3s"></li>
<li class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s"></li>
<li class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.9s" swiper-animate-delay="0.3s"></li>
<li class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="0.1s"></li>
<li class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1.1s" swiper-animate-delay="0.9s"></li>
<li class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1.8s" swiper-animate-delay="0.5s"></li>
<li class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1.1s" swiper-animate-delay="0.9s"></li>
</ul>
<img src="images/rw1.png">
<img src="images/rw2.png">
<i class="iconfont love"></i>
</div>
</div>
</div>
<script src="js/swiper-3.3.1.min.js"></script>
<script>
var swiperSlide = $(".swiper-slide");
var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical',
//插件初始化时，第一页需要特殊处理的话，需要在此定义
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperSlide.eq(0).addClass("ani");
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
//切换完成之后触发
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper);
swiperSlide.eq(mySwiper.activeIndex).addClass("ani").siblings().removeClass("ani");
//每个slide切换结束时也运行当前slide动画
}
});
var num,number;
function wz(node,ji){
wzz(node,ji);
var interval = setInterval(function(){
wzz(node,ji);
},1000);
}
function wzz(node,ji){
num = Math.floor(Math.random()*300);
number = Math.floor(Math.random()*80);
node.style.height = "8px";
node.style.background="url(images/xx"+ji+".png) no-repeat";
node.style.position="relative";
node.style.top=number+"px";
node.style.left=num+"px";
}
$.each($(".xing li"),function(i,item){
if(i%2==0){
ji=1;
wz(item,ji);
}
if(i%2==1){
ji=2;
wz(item,ji);
}
})
</script>
</body>
</html>
body, html {
max-width: 750px;
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
visibility: visible!important;
font-size: 0;
}
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1470719195'); /* IE9*/
src: url('iconfont.eot?t=1470719195#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff?t=1470719195') format('woff'), /* chrome, firefox */
url('iconfont.ttf?t=1470719195') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1470719195#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.page {
background: -webkit-linear-gradient(#cbb1fa, #ecdbeb); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(#cbb1fa, #ecdbeb); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(#cbb1fa, #ecdbeb); /* Firefox 3.6 - 15 */
background: linear-gradient(#cbb1fa, #ecdbeb); /* 标准的语法（必须放在最后） */
}
.yueliang {
position: absolute;
width: 1rem;
height: 1rem;
background: url(../images/yue.png);
background-size: cover;
border-radius: 50%;
box-shadow: 3px 3px 4px 0px #7a7a89,2px 2px 20px 6px #c1c1cb,1px 1px 44px 32px #d4d4d9;
-webkit-animation: change 20s linear forwards;
-moz-animation: change 20s linear forwards;
-o-animation: change 20s linear forwards;
animation: change 20s linear forwards;
}
@-webkit-keyframes change {
0% {
top: 2.2rem;
left: 0.8rem;
}
10% {
top: 2rem;
left: 1rem;
}
20% {
top: 1.8rem;
left: 1.2rem;
}
30% {
top: 1.7rem;
left: 1.4rem;
}
40% {
top: 1.65rem;
left: 1.6rem;
}
50% {
top: 1.6rem;
left: 1.8rem;
}
60% {
top: 1.58rem;
left: 2rem;
}
70% {
top: 1.56rem;
left: 2.2rem;
}
80% {
top: 1.55rem;
left: 2.4rem;
}
90% {
top: 1.548rem;
left: 2.6rem;
}
100% {
top: 1.545rem;
left: 2.8rem;
}
}
@-moz-keyframes change {
0% {
top: 2.2rem;
left: 0.8rem;
}
10% {
top: 2rem;
left: 1rem;
}
20% {
top: 1.8rem;
left: 1.2rem;
}
30% {
top: 1.7rem;
left: 1.4rem;
}
40% {
top: 1.65rem;
left: 1.6rem;
}
50% {
top: 1.6rem;
left: 1.8rem;
}
60% {
top: 1.58rem;
left: 2rem;
}
70% {
top: 1.56rem;
left: 2.2rem;
}
80% {
top: 1.55rem;
left: 2.4rem;
}
90% {
top: 1.548rem;
left: 2.6rem;
}
100% {
top: 1.545rem;
left: 2.8rem;
}
}
@-o-keyframes change {
0% {
top: 2.2rem;
left: 0.8rem;
}
10% {
top: 2rem;
left: 1rem;
}
20% {
top: 1.8rem;
left: 1.2rem;
}
30% {
top: 1.7rem;
left: 1.4rem;
}
40% {
top: 1.65rem;
left: 1.6rem;
}
50% {
top: 1.6rem;
left: 1.8rem;
}
60% {
top: 1.58rem;
left: 2rem;
}
70% {
top: 1.56rem;
left: 2.2rem;
}
80% {
top: 1.55rem;
left: 2.4rem;
}
90% {
top: 1.548rem;
left: 2.6rem;
}
100% {
top: 1.545rem;
left: 2.8rem;
}
}
@keyframes change {
0% {
top: 2.2rem;
left: 0.8rem;
}
10% {
top: 2rem;
left: 1rem;
}
20% {
top: 1.8rem;
left: 1.2rem;
}
30% {
top: 1.7rem;
left: 1.4rem;
}
40% {
top: 1.65rem;
left: 1.6rem;
}
50% {
top: 1.6rem;
left: 1.8rem;
}
60% {
top: 1.58rem;
left: 2rem;
}
70% {
top: 1.56rem;
left: 2.2rem;
}
80% {
top: 1.55rem;
left: 2.4rem;
}
90% {
top: 1.548rem;
left: 2.6rem;
}
100% {
top: 1.545rem;
left: 2.8rem;
}
}
.niao li:nth-child(1) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn4.png) no-repeat;
background-size: cover;
top: 9.9rem;
left: 0;
}
.niao li:nth-child(2) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn6.png) no-repeat;
background-size: cover;
top: 9.7rem;
left: 0.05rem;
}
.niao li:nth-child(3) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn5.png) no-repeat;
background-size: cover;
top: 9.5rem;
left: 0.08rem;
}
.niao li:nth-child(4) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn4.png) no-repeat;
background-size: cover;
top: 9.6rem;
left: 0.5rem;
}
.niao li:nth-child(5) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn6.png) no-repeat;
background-size: cover;
top: 9.4rem;
left: 0.55rem;
}
.niao li:nth-child(6) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn5.png) no-repeat;
background-size: cover;
top: 9.2rem;
left: 0.58rem;
}
.niao li:nth-child(7) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn4.png) no-repeat;
background-size: cover;
top: 9.4rem;
left: 1rem;
}
.niao li:nth-child(8) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn6.png) no-repeat;
background-size: cover;
top: 9.2rem;
left: 1.05rem;
}
.niao li:nth-child(9) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn5.png) no-repeat;
background-size: cover;
top: 9rem;
left: 1.08rem;
}
.niao li:nth-child(10) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn4.png) no-repeat;
background-size: cover;
top: 9.2rem;
left: 1.5rem;
}
.niao li:nth-child(11) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn6.png) no-repeat;
background-size: cover;
top: 9rem;
left: 1.55rem;
}
.niao li:nth-child(12) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn5.png) no-repeat;
background-size: cover;
top: 8.8rem;
left: 1.58rem;
}
.niao li:nth-child(13) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn4.png) no-repeat;
background-size: cover;
top: 9rem;
left: 2rem;
}
.niao li:nth-child(14) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn6.png) no-repeat;
background-size: cover;
top: 8.82rem;
left: 2.05rem;
}
.niao li:nth-child(15) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn5.png) no-repeat;
background-size: cover;
top: 8.62rem;
left: 2.08rem;
}
.niao li:nth-child(16) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn4.png) no-repeat;
background-size: cover;
top: 8.82rem;
left: 2.5rem;
}
.niao li:nth-child(17) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn6.png) no-repeat;
background-size: cover;
top: 8.66rem;
left: 2.55rem;
}
.niao li:nth-child(18) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn5.png) no-repeat;
background-size: cover;
top: 8.46rem;
left: 2.58rem;
}
.niao li:nth-child(19) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn4.png) no-repeat;
background-size: cover;
top: 8.66rem;
left: 3rem;
}
.niao li:nth-child(20) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn6.png) no-repeat;
background-size: cover;
top: 8.5rem;
left: 3.05rem;
}
.niao li:nth-child(21) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn5.png) no-repeat;
background-size: cover;
top: 8.34rem;
left: 3.08rem;
}
.niao li:nth-child(22) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn1.png) no-repeat;
background-size: cover;
top: 8.66rem;
left: 3.5rem;
}
.niao li:nth-child(23) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn3.png) no-repeat;
background-size: cover;
top: 8.5rem;
left: 3.55rem;
}
.niao li:nth-child(24) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn2.png) no-repeat;
background-size: cover;
top: 8.34rem;
left: 3.58rem;
}
.niao li:nth-child(25) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn1.png) no-repeat;
background-size: cover;
top: 8.82rem;
left: 4rem;
}
.niao li:nth-child(26) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn3.png) no-repeat;
background-size: cover;
top: 8.66rem;
left: 4.05rem;
}
.niao li:nth-child(27) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn2.png) no-repeat;
background-size: cover;
top: 8.46rem;
left: 4.08rem;
}
.niao li:nth-child(28) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn1.png) no-repeat;
background-size: cover;
top: 9rem;
left: 4.5rem;
}
.niao li:nth-child(29) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn3.png) no-repeat;
background-size: cover;
top: 8.82rem;
left: 4.55rem;
}
.niao li:nth-child(30) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn2.png) no-repeat;
background-size: cover;
top: 8.62rem;
left: 4.58rem;
}
.niao li:nth-child(31) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn1.png) no-repeat;
background-size: cover;
top: 9.2rem;
left: 5rem;
}
.niao li:nth-child(32) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn3.png) no-repeat;
background-size: cover;
top: 9rem;
left: 5.05rem;
}
.niao li:nth-child(33) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn2.png) no-repeat;
background-size: cover;
top: 8.8rem;
left: 5.08rem;
}
.niao li:nth-child(34) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn1.png) no-repeat;
background-size: cover;
top: 9.4rem;
left: 5.5rem;
}
.niao li:nth-child(35) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn3.png) no-repeat;
background-size: cover;
top: 9.2rem;
left: 5.55rem;
}
.niao li:nth-child(36) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn2.png) no-repeat;
background-size: cover;
top: 9rem;
left: 5.58rem;
}
.niao li:nth-child(37) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn1.png) no-repeat;
background-size: cover;
top: 9.6rem;
left: 6rem;
}
.niao li:nth-child(38) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn3.png) no-repeat;
background-size: cover;
top: 9.4rem;
left: 6.05rem;
}
.niao li:nth-child(39) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn2.png) no-repeat;
background-size: cover;
top: 9.2rem;
left: 6.08rem;
}
.niao li:nth-child(40) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn1.png) no-repeat;
background-size: cover;
top: 10rem;
left: 6.5;
}
.niao li:nth-child(41) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn3.png) no-repeat;
background-size: cover;
top: 9.8rem;
left: 6.55rem;
}
.niao li:nth-child(42) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn2.png) no-repeat;
background-size: cover;
top: 9.6rem;
left: 6.58rem;
}
.niao li:nth-child(43) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn2.png) no-repeat;
background-size: cover;
top: 9.6rem;
left: 7rem;
}
.niao li:nth-child(44) {
width: 0.43rem;
height: 0.19rem;
position: absolute;
background: url(../images/xn2.png) no-repeat;
background-size: cover;
top: 9.8rem;
left: 7.05rem;
}
.page img:nth-of-type(1) {
position: absolute;
-webkit-animation: run 20s linear forwards;
-moz-animation: run 20s linear forwards;
-o-animation: run 20s linear forwards;
animation: run 20s linear forwards;
-webkit-transition: transform 10s;
-moz-transition: transform 10s;
-ms-transition: transform 10s;
-o-transition: transform 10s;
transition: transform 10s;
}
@-webkit-keyframes run {
0% {
top: 7rem;
left: 0;
}
25% {
top: 6.7rem;
left: 0.9rem;
}
50% {
top: 6.5rem;
left: 1.8rem;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
75% {
top: 4rem;
left: 1.8rem;
}
90% {
top: 2rem;
left: 2.2rem;
}
100% {
top: 1rem;
left: 2.4rem;
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
}
}
@-moz-keyframes run {
0% {
top: 7rem;
left: 0;
}
25% {
top: 6.7rem;
left: 0.9rem;
}
50% {
top: 6.5rem;
left: 1.8rem;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
75% {
top: 4rem;
left: 1.8rem;
}
90% {
top: 2rem;
left: 2.2rem;
}
100% {
top: 1rem;
left: 2.4rem;
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
}
}
@-o-keyframes run {
0% {
top: 7rem;
left: 0;
}
25% {
top: 6.7rem;
left: 0.9rem;
}
50% {
top: 6.5rem;
left: 1.8rem;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
75% {
top: 4rem;
left: 1.8rem;
}
90% {
top: 2rem;
left: 2.2rem;
}
100% {
top: 1rem;
left: 2.4rem;
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
}
}
@keyframes run {
0% {
top: 7rem;
left: 0;
}
25% {
top: 6.7rem;
left: 0.9rem;
}
50% {
top: 6.5rem;
left: 1.8rem;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
75% {
top: 4rem;
left: 1.8rem;
}
90% {
top: 2rem;
left: 2.2rem;
}
100% {
top: 1rem;
left: 2.4rem;
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
}
}
.page img:nth-of-type(2) {
position: absolute;
-webkit-animation: run2 20s linear forwards;
-moz-animation: run2 20s linear forwards;
-o-animation: run2 20s linear forwards;
animation: run2 20s linear forwards;
-webkit-transition: transform 10s;
-moz-transition: transform 10s;
-ms-transition: transform 10s;
-o-transition: transform 10s;
transition: transform 10s;
}
@-webkit-keyframes run2 {
0% {
top: 7rem;
left: 6rem;
}
25% {
top: 6.7rem;
left: 4.9rem;
}
50% {
top: 6.5rem;
left: 3.8rem;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
75% {
top: 4rem;
left: 2.5rem;
}
90% {
top: 2rem;
left: 2.5rem;
}
100% {
top: 1rem;
left: 2.5rem;
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
}
}
@-moz-keyframes run2 {
0% {
top: 7rem;
left: 6rem;
}
25% {
top: 6.7rem;
left: 4.9rem;
}
50% {
top: 6.5rem;
left: 3.8rem;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
75% {
top: 4rem;
left: 2.5rem;
}
90% {
top: 2rem;
left: 2.5rem;
}
100% {
top: 1rem;
left: 2.5rem;
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
}
}
@-o-keyframes run2 {
0% {
top: 7rem;
left: 6rem;
}
25% {
top: 6.7rem;
left: 4.9rem;
}
50% {
top: 6.5rem;
left: 3.8rem;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
75% {
top: 4rem;
left: 2.5rem;
}
90% {
top: 2rem;
left: 2.5rem;
}
100% {
top: 1rem;
left: 2.5rem;
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
}
}
@keyframes run2 {
0% {
top: 7rem;
left: 6rem;
}
25% {
top: 6.7rem;
left: 4.9rem;
}
50% {
top: 6.5rem;
left: 3.5rem;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
75% {
top: 4rem;
left: 2.5rem;
}
90% {
top: 2rem;
left: 2.5rem;
}
100% {
top: 1rem;
left: 2.5rem;
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
}
}
.love {
position: absolute;
width: 100%;
color: rgba(255,0,0,0);
top: 3.5rem;
left: 0;
font-size: 3rem;
text-align: center;
-webkit-animation: lov 5s 10s linear infinite;
-moz-animation: lov 5s 10s linear infinite;
-o-animation: lov 5s 10s linear infinite;
animation: lov 5s 10s linear infinite;
-webkit-transition: transform 5s;
-moz-transition: transform 5s;
-ms-transition: transform 5s;
-o-transition: transform 5s;
transition: transform 5s;
}
@-webkit-keyframes lov {
0% {
color: rgba(255,0,0,0);
transform:scale(0.2);
}
25% {
color: rgba(255,0,0,0.8);
transform:scale(1.2);
}
50% {
color: rgba(255,0,0,0.5);
transform:scale(0.8);
}
75% {
color: rgba(255,0,0,0.8);
transform:scale(1.5);
}
100% {
color: rgba(255,0,0,0.6);
transform:scale(1);
}
}
@-moz-keyframes lov {
0% {
color: rgba(255,0,0,0);
transform:scale(0.2);
}
25% {
color: rgba(255,0,0,0.8);
transform:scale(1.2);
}
50% {
color: rgba(255,0,0,0.5);
transform:scale(0.8);
}
75% {
color: rgba(255,0,0,0.8);
transform:scale(1.5);
}
100% {
color: rgba(255,0,0,0.6);
transform:scale(1);
}
}
@-o-keyframes lov {
0% {
color: rgba(255,0,0,0);
transform:scale(0.2);
}
25% {
color: rgba(255,0,0,0.8);
transform:scale(1.2);
}
50% {
color: rgba(255,0,0,0.5);
transform:scale(0.8);
}
75% {
color: rgba(255,0,0,0.8);
transform:scale(1.5);
}
100% {
color: rgba(255,0,0,0.6);
transform:scale(1);
}
}
@keyframes lov {
0% {
color: rgba(255,0,0,0);
transform:scale(0.2);
}
25% {
color: rgba(255,0,0,0.8);
transform:scale(1.2);
}
50% {
color: rgba(255,0,0,0.5);
transform:scale(0.8);
}
75% {
color: rgba(255,0,0,0.8);
transform:scale(1.5);
}
100% {
color: rgba(255,0,0,0.6);
transform:scale(1);
}
}
<img src="http://img.blog.csdn.net/20160809132605986?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20160809132611346?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20160809132615470?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20160809132619518?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20160809132619518?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20160809132624002?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20160809132629409?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20160809132639048?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20160809132643097?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20160809132647455?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20160809132652441?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20160809132656722?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />