CSS3实现酷炫流光页面动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现酷炫流光页面动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3实现酷炫流光页面动画特效</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 二维码 -->
<div class="erwei"><img src="images/erwei.png"></div>
<!-- 二维码 end -->
<!-- 旋转的圈圈 -->
<div class="quan_01"><img src="images/quan_01.png"></div>
<div class="quan_02"><img src="images/quan_02.png"></div>
<!-- 旋转的圈圈 end -->
<!-- 不安分的小色块 -->
<div class="dis_01"><img src="images/dis_01.png"></div>
<div class="dis_02"><img src="images/dis_02.png"></div>
<div class="dis_03"><img src="images/dis_03.png"></div>
<div class="dis_04"><img src="images/dis_04.png"></div>
<div class="dis_05"><img src="images/dis_05.png"></div>
<div class="dis_06"><img src="images/dis_06.png"></div>
<div class="dis_07"><img src="images/dis_07.png"></div>

<!-- 不安分的小色块 end -->

<!-- 移动的高光 -->

<div class="yi_guang_01" style="left:50%;top:0;margin:-115px 0 0 -108px;"><img src="images/yi_guang_01.png"></div>
<div class="yi_guang_02" style="left:50%;top:0;margin:-115px 0 0 -308px;"><img src="images/yi_guang_01.png"></div>
<div class="yi_guang_03" style="left:50%;top:0;margin:-115px 0 0 -508px;"><img src="images/yi_guang_01.png"></div>
<div class="yi_guang_04" style="left:50%;top:0;margin:-115px 0 0 -708px;"><img src="images/yi_guang_01.png"></div>
<div class="yi_guang_05" style="left:50%;top:0;margin:-115px 0 0 -908px;"><img src="images/yi_guang_01.png"></div>
<div class="yi_guang_06" style="left:50%;top:0;margin:-115px 0 0 192px;"><img src="images/yi_guang_01.png"></div>
<div class="yi_guang_07" style="left:50%;top:0;margin:-115px 0 0 392px;"><img src="images/yi_guang_01.png"></div>
<div class="yi_guang_08" style="left:50%;top:0;margin:-115px 0 0 592px;"><img src="images/yi_guang_01.png"></div>
<div class="yi_guang_09" style="left:50%;top:0;margin:-115px 0 0 792px;"><img src="images/yi_guang_01.png"></div>
<div class="yi_guang_10" style="left:50%;top:100%;margin:0 0 0 92px;"><img src="images/yi_guang_02.png"></div>
<div class="yi_guang_11" style="left:50%;top:100%;margin:0 0 0 292px;"><img src="images/yi_guang_02.png"></div>
<div class="yi_guang_12" style="left:50%;top:100%;margin:0 0 0 492px;"><img src="images/yi_guang_02.png"></div>
<div class="yi_guang_13" style="left:50%;top:100%;margin:0 0 0 692px;"><img src="images/yi_guang_02.png"></div>
<div class="yi_guang_14" style="left:50%;top:100%;margin:0 0 0 892px;"><img src="images/yi_guang_02.png"></div>
<div class="yi_guang_15" style="left:50%;top:100%;margin:0 0 0 -208px;"><img src="images/yi_guang_02.png"></div>
<div class="yi_guang_16" style="left:50%;top:100%;margin:0 0 0 -408px;"><img src="images/yi_guang_02.png"></div>
<div class="yi_guang_17" style="left:50%;top:100%;margin:0 0 0 -608px;"><img src="images/yi_guang_02.png"></div>
<div class="yi_guang_18" style="left:50%;top:100%;margin:0 0 0 -808px;"><img src="images/yi_guang_02.png"></div>

<div class="yi_guang_19" style="left:0%;top:50%;margin:92px 0 0 -115px;"><img src="images/yi_guang_03.png"></div>
<div class="yi_guang_20" style="left:0%;top:50%;margin:292px 0 0 -115px;"><img src="images/yi_guang_03.png"></div>
<div class="yi_guang_21" style="left:0%;top:50%;margin:-208px 0 0 -115px;"><img src="images/yi_guang_03.png"></div>
<div class="yi_guang_22" style="left:0%;top:50%;margin:-408px 0 0 -115px;"><img src="images/yi_guang_03.png"></div>
<div class="yi_guang_23" style="left:100%;top:50%;margin:-108px 0 0 0;"><img src="images/yi_guang_04.png"></div>
<div class="yi_guang_24" style="left:100%;top:50%;margin:-308px 0 0 0;"><img src="images/yi_guang_04.png"></div>
<div class="yi_guang_25" style="left:100%;top:50%;margin:192px 0 0 0;"><img src="images/yi_guang_04.png"></div>
<div class="yi_guang_26" style="left:100%;top:50%;margin:392px 0 0 0;"><img src="images/yi_guang_04.png"></div>

<!-- 移动的高光 end -->

<!-- 闪烁的星星 -->

<div class="stars stars_01" style="margin:-116px 0 0 -516px;"><img src="images/stars_00.png"></div>
<div class="stars stars_03" style="margin:-7px 0 0 -507px;"><img src="images/stars_02.png"></div>
<div class="stars stars_03" style="margin:193px 0 0 -507px;"><img src="images/stars_02.png"></div>
<div class="stars stars_03" style="margin:193px 0 0 -607px;"><img src="images/stars_02.png"></div>
<div class="stars stars_04" style="margin:95px 0 0 -605px;"><img src="images/stars_03.png"></div>
<div class="stars stars_03" style="margin:-307px 0 0 -607px;"><img src="images/stars_02.png"></div>
<div class="stars stars_03" style="margin:-407px 0 0 -807px;"><img src="images/stars_02.png"></div>
<div class="stars stars_03" style="margin:-7px 0 0 -807px;"><img src="images/stars_02.png"></div>
<div class="stars stars_03" style="margin:193px 0 0 -807px;"><img src="images/stars_02.png"></div>
<div class="stars stars_02" style="margin:-210px 0 0 -710px;"><img src="images/stars_01.png"></div>
<div class="stars stars_04" style="margin:-200px 0 0 -700px;"><img src="images/stars_03.png"></div>
<div class="stars stars_02" style="margin:90px 0 0 -710px;"><img src="images/stars_01.png"></div>
<div class="stars stars_04" style="margin:90px 0 0 -700px;"><img src="images/stars_03.png"></div>
<div class="stars stars_03" style="margin:293px 0 0 -707px;"><img src="images/stars_02.png"></div>
<div class="stars stars_03" style="margin:393px 0 0 -707px;"><img src="images/stars_02.png"></div>
<div class="stars stars_04" style="margin:295px 0 0 -505px;"><img src="images/stars_03.png"></div>
<div class="stars stars_03" style="margin:-102px 0 0 -502px;"><img src="images/stars_02.png"></div>
<div class="stars stars_03" style="margin:-107px 0 0 -207px;"><img src="images/stars_02.png"></div>
<div class="stars stars_02" style="margin:90px 0 0 -210px;"><img src="images/stars_01.png"></div>
<div class="stars stars_03" style="margin:93px 0 0 -407px;"><img src="images/stars_02.png"></div>
<div class="stars stars_03" style="margin:-307px 0 0 -407px;"><img src="images/stars_02.png"></div>
<div class="stars stars_03" style="margin:-407px 0 0 -507px;"><img src="images/stars_02.png"></div>
<div class="stars stars_04" style="margin:295px 0 0 -205px;"><img src="images/stars_03.png"></div>
<div class="stars stars_03" style="margin:293px 0 0 -7px;"><img src="images/stars_02.png"></div>
<div class="stars stars_03" style="margin:293px 0 0 393px;"><img src="images/stars_02.png"></div>
<div class="stars stars_03" style="margin:195px 0 0 395px;"><img src="images/stars_02.png"></div>
<div class="stars stars_02" style="margin:190px 0 0 390px;"><img src="images/stars_01.png"></div>
<div class="stars stars_04" style="margin:395px 0 0 295px;"><img src="images/stars_03.png"></div>
<div class="stars stars_04" style="margin:395px 0 0 495px;"><img src="images/stars_03.png"></div>
<div class="stars stars_03" style="margin:293px 0 0 493px;"><img src="images/stars_02.png"></div>
<div class="stars stars_03" style="margin:393px 0 0 693px;"><img src="images/stars_02.png"></div>
<div class="stars stars_02" style="margin:190px 0 0 -110px;"><img src="images/stars_01.png"></div>
<div class="stars stars_02" style="margin:-110px 0 0 -217px;"><img src="images/stars_01.png"></div>
<div class="stars stars_03" style="margin:-207px 0 0 -7px;"><img src="images/stars_02.png"></div>
<div class="stars stars_04" style="margin:-305px 0 0 -105px;"><img src="images/stars_03.png"></div>
<div class="stars stars_02" style="margin:-305px 0 0 -110px;"><img src="images/stars_01.png"></div>
<div class="stars stars_01" style="margin:-116px 0 0 84px;"><img src="images/stars_00.png"></div>
<div class="stars stars_01" style="margin:-416px 0 0 84px;"><img src="images/stars_00.png"></div>
<div class="stars stars_04" style="margin:-402px 0 0 97px;"><img src="images/stars_03.png"></div>
<div class="stars stars_04" style="margin:-105px 0 0 295px;"><img src="images/stars_03.png"></div>
<div class="stars stars_03" style="margin:-207px 0 0 193px;"><img src="images/stars_02.png"></div>
<div class="stars stars_02" style="margin:-310px 0 0 290px;"><img src="images/stars_01.png"></div>
<div class="stars stars_03" style="margin:-7px 0 0 193px;"><img src="images/stars_02.png"></div>
<div class="stars stars_04" style="margin:-2px 0 0 198px;"><img src="images/stars_03.png"></div>
<div class="stars stars_03" style="margin:193px 0 0 93px;"><img src="images/stars_02.png"></div>
<div class="stars stars_01" style="margin:284px 0 0 590px;"><img src="images/stars_00.png"></div>
<div class="stars stars_01" style="margin:-12px 0 0 490px;"><img src="images/stars_00.png"></div>
<div class="stars stars_03" style="margin:293px 0 0 593px;"><img src="images/stars_02.png"></div>
<div class="stars stars_03" style="margin:-7px 0 0 493px;"><img src="images/stars_02.png"></div>
<div class="stars stars_03" style="margin:-7px 0 0 693px;"><img src="images/stars_02.png"></div>
<div class="stars stars_04" style="margin:95px 0 0 595px;"><img src="images/stars_03.png"></div>
<div class="stars stars_04" style="margin:-105px 0 0 595px;"><img src="images/stars_03.png"></div>
<div class="stars stars_04" style="margin:-205px 0 0 595px;"><img src="images/stars_03.png"></div>
<div class="stars stars_03" style="margin:-205px 0 0 595px;"><img src="images/stars_02.png"></div>
<div class="stars stars_03" style="margin:-207px 0 0 493px;"><img src="images/stars_02.png"></div>
<div class="stars stars_02" style="margin:-310px 0 0 690px;"><img src="images/stars_01.png"></div>
<div class="stars stars_03" style="margin:-307px 0 0 393px;"><img src="images/stars_02.png"></div>
<div class="stars stars_03" style="margin:193px 0 0 493px;"><img src="images/stars_02.png"></div>

<!-- 闪烁的星星 end -->
</body>
</html>

CSS代码(style.css):

@charset "utf-8";/* margin and padding */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,img,form,applet,fieldset,legend,button,input,textarea,th,table,tr,td{margin:0;padding:0;border:none;}
/* bady */
body{font-family:"寰蒋闆呴粦";font-size:12px;color:#fff;background:#1a0c2c url(../images/body_bg.png) center center no-repeat;position:relative;height:100%;width:100%;overflow:hidden;}
body,div,fieldset,form,h1,h2,h3,h4,h5,h6,html,p{-webkit-text-size-adjust:none}
html{height:100%;width:100%;}
input::-ms-clear{display:none;}
/*娓呮鏂囨湰妗哫*/
body.disabled-onepage-scroll,.disabled-onepage-scroll .onepage-wrapper,html{position:inherit;}
/* img */
img{padding:0;margin:0;vertical-align:top;border:none}
li,ul{list-style:none;outside:none;}
dl,dt,dd{-moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s;}
/* float */
.fl{float:left;}
.fr{float:right;}
.auto{margin:0 auto;}
/* div */
ul,li{list-style-type:none;}
.clear{clear:both;height:0;width:100%;}
/* font */
a{color:#fff;text-decoration:none;}
a:hover,a:active,a:focus{text-decoration:none;color:#DD137B;}
@-webkit-keyframes rotate{0%{-webkit-transform:rotateZ(-45deg)}
100%{-webkit-transform:rotateZ(315deg)}
}
@keyframes rotate{0%{transform:rotateZ(-45deg)}
100%{transform:rotateZ(315deg)}
}
@-webkit-keyframes rotate_x{0%{-webkit-transform:rotateZ(45deg)}
100%{-webkit-transform:rotateZ(-315deg)}
}
@keyframes rotate_x{0%{transform:rotateZ(45deg)}
100%{transform:rotateZ(-315deg)}
}
@-webkit-keyframes top{0%{top:0%;}
30%{top:120%;}
40%{-webkit-transform:rotateZ(0deg)}
50%{top:120%;-webkit-transform:rotateZ(180deg)}
80%{top:-10%;}
90%{-webkit-transform:rotateZ(180deg)}
100%{top:0%;}
}
@keyframes top{0%{top:0%;}
30%{top:120%;}
40%{transform:rotateZ(0deg)}
50%{top:120%;transform:rotateZ(180deg)}
80%{top:-10%;}
90%{transform:rotateZ(180deg)}
100%{top:0%;}
}
@-webkit-keyframes bottom{0%{top:100%;}
30%{top:-20%;}
40%{-webkit-transform:rotateZ(0deg)}
50%{top:-20%;-webkit-transform:rotateZ(180deg)}
80%{top:120%;}
90%{-webkit-transform:rotateZ(180deg)}
100%{top:100%;}
}
@keyframes bottom{0%{top:100%;}
30%{top:-20%;}
40%{transform:rotateZ(0deg)}
50%{top:-20%;transform:rotateZ(180deg)}
80%{top:120%;}
90%{transform:rotateZ(180deg)}
100%{top:100%;}
}
@-webkit-keyframes left{0%{left:0%;}
30%{left:120%;}
40%{-webkit-transform:rotateZ(0deg)}
50%{left:120%;-webkit-transform:rotateZ(180deg)}
80%{left:-10%;}
90%{-webkit-transform:rotateZ(180deg)}
100%{left:0%;}
}
@keyframes left{0%{left:0%;}
30%{left:120%;}
40%{transform:rotateZ(0deg)}
50%{left:120%;transform:rotateZ(180deg)}
80%{left:-10%;}
90%{transform:rotateZ(180deg)}
100%{left:0%;}
}
@-webkit-keyframes right{0%{left:100%;}
30%{left:-20%;}
40%{-webkit-transform:rotateZ(0deg)}
50%{left:-20%;-webkit-transform:rotateZ(180deg)}
80%{left:120%;}
90%{-webkit-transform:rotateZ(180deg)}
100%{left:100%;}
}
@keyframes right{0%{left:100%;}
30%{left:-20%;}
40%{transform:rotateZ(0deg)}
50%{left:-20%;transform:rotateZ(180deg)}
80%{left:120%;}
90%{transform:rotateZ(180deg)}
100%{left:100%;}
}
@-webkit-keyframes dis_01{0%{margin:-450px 0 0 -365px;}
25%{margin:-450px 0 0 -335px;}
50%{margin:-420px 0 0 -335px;}
75%{margin:-420px 0 0 -365px;}
100%{margin:-450px 0 0 -365px;}
}
@keyframes dis_01{0%{margin:-450px 0 0 -365px;}
25%{margin:-450px 0 0 -335px;}
50%{margin:-420px 0 0 -335px;}
75%{margin:-420px 0 0 -365px;}
100%{margin:-450px 0 0 -365px;}
}
@-webkit-keyframes dis_02{0%{margin:-510px 0 0 280px;}
25%{margin:-510px 0 0 260px;}
50%{margin:-490px 0 0 260px;}
75%{margin:-490px 0 0 280px;}
100%{margin:-510px 0 0 280px;}
}
@keyframes dis_02{0%{margin:-510px 0 0 280px;}
25%{margin:-510px 0 0 260px;}
50%{margin:-490px 0 0 260px;}
75%{margin:-490px 0 0 280px;}
100%{margin:-510px 0 0 280px;}
}
@-webkit-keyframes dis_03{0%{margin:-200px 0 0 -380px;}
50%{margin:-220px 0 0 -400px;}
100%{margin:-200px 0 0 -380px;}
}
@keyframes dis_03{0%{margin:-200px 0 0 -380px;}
50%{margin:-220px 0 0 -400px;}
100%{margin:-200px 0 0 -380px;}
}
@-webkit-keyframes dis_04{0%{margin:-90px 0 0 350px;}
50%{margin:-90px 0 0 380px;}
100%{margin:-90px 0 0 350px;}
}
@keyframes dis_04{0%{margin:-90px 0 0 350px;}
50%{margin:-90px 0 0 380px;}
100%{margin:-90px 0 0 350px;}
}
@-webkit-keyframes dis_05{0%{margin:160px 0 0 280px;}
50%{margin:140px 0 0 260px;}
100%{margin:160px 0 0 280px;}
}
@keyframes dis_05{0%{margin:160px 0 0 280px;}
50%{margin:140px 0 0 260px;}
100%{margin:160px 0 0 280px;}
}
@-webkit-keyframes dis_06{0%{margin:290px 0 0 -450px;}
50%{margin:270px 0 0 -450px;}
100%{margin:290px 0 0 -450px;}
}
@keyframes dis_06{0%{margin:290px 0 0 -450px;}
50%{margin:270px 0 0 -450px;}
100%{margin:290px 0 0 -450px;}
}
@-webkit-keyframes dis_07{0%{margin:315px 0 0 -55px;}
50%{margin:315px 0 0 -35px;}
100%{margin:315px 0 0 -55px;}
}
@keyframes dis_07{0%{margin:315px 0 0 -55px;}
50%{margin:315px 0 0 -35px;}
100%{margin:315px 0 0 -55px;}
}
@-webkit-keyframes stars{0%{-webkit-transform:rotateZ(0deg);opacity:1;}
50%{-webkit-transform:rotateZ(180deg);opacity:0;}
100%{-webkit-transform:rotateZ(360deg);opacity:1;}
}
@keyframes stars{0%{transform:rotateZ(0deg);opacity:1;}
50%{transform:rotateZ(180deg);opacity:0;}
100%{transform:rotateZ(360deg);opacity:1;}
}
@-webkit-keyframes stars_1{0%{-webkit-transform:rotateZ(0deg);opacity:0;}
50%{-webkit-transform:rotateZ(180deg);opacity:1;}
100%{-webkit-transform:rotateZ(360deg);opacity:0;}
}
@keyframes stars_1{0%{transform:rotateZ(0deg);opacity:0;}
50%{transform:rotateZ(180deg);opacity:1;}
100%{transform:rotateZ(360deg);opacity:0;}
}
.quan_01{width:680px;height:680px;position:absolute;top:50%;left:50%;margin:-340px 0 0 -340px;z-index:2;-webkit-animation:rotate_x 10s linear 0s infinite;animation:rotate_x 10s linear 0s infinite;}
.quan_02{width:820px;height:820px;position:absolute;top:50%;left:50%;margin:-410px 0 0 -410px;z-index:6;-webkit-animation:rotate 16s linear 0s infinite;animation:rotate 16s linear 0s infinite;}
.erwei{width:600px;height:600px;position:absolute;left:50%;top:50%;margin:-300px 0 0 -300px;}
.dis_01{top:50%;left:50%;margin:-450px 0 0 -365px;width:127px;height:116px;position:absolute;z-index:1;-webkit-animation:dis_01 8s linear 0s infinite;animation:dis_01 8s linear 0s infinite;}
.dis_02{top:50%;left:50%;margin:-510px 0 0 280px;width:188px;height:205px;position:absolute;z-index:1;-webkit-animation:dis_02 12s linear 0s infinite;animation:dis_02 12s linear 0s infinite;}
.dis_03{top:50%;left:50%;margin:-200px 0 0 -350px;width:94px;height:99px;position:absolute;z-index:5;-webkit-animation:dis_03 6s linear 0s infinite;animation:dis_03 6s linear 0s infinite;}
.dis_04{top:50%;left:50%;margin:-90px 0 0 370px;width:58px;height:73px;position:absolute;z-index:10;-webkit-animation:dis_04 5s linear 0s infinite;animation:dis_04 5s linear 0s infinite;}
.dis_05{top:50%;left:50%;margin:160px 0 0 280px;width:89px;height:113px;position:absolute;z-index:5;-webkit-animation:dis_05 8s linear 0s infinite;animation:dis_05 8s linear 0s infinite;}
.dis_06{top:50%;left:50%;margin:250px 0 0 -450px;width:138px;height:111px;position:absolute;z-index:10;-webkit-animation:dis_06 4s linear 0s infinite;animation:dis_06 4s linear 0s infinite;}
.dis_07{top:50%;left:50%;margin:315px 0 0 -55px;width:71px;height:90px;position:absolute;z-index:1;-webkit-animation:dis_07 5s linear 0s infinite;animation:dis_07 5s linear 0s infinite;}
.yi_guang_01,.yi_guang_02,.yi_guang_03,.yi_guang_04,.yi_guang_05,.yi_guang_06,.yi_guang_07,.yi_guang_08,.yi_guang_09,.yi_guang_10,.yi_guang_11,.yi_guang_12,.yi_guang_13,.yi_guang_14,.yi_guang_15,.yi_guang_16,.yi_guang_17,.yi_guang_18{position:absolute;width:19px;height:115px;z-index:3;}
.yi_guang_19,.yi_guang_20,.yi_guang_21,.yi_guang_22,.yi_guang_23,.yi_guang_24,.yi_guang_25,.yi_guang_26{position:absolute;width:115px;height:19px;z-index:3;}
.yi_guang_01{-webkit-animation:top 16s linear 0s infinite;animation:top 16s linear 0s infinite;}
.yi_guang_02{-webkit-animation:top 21s linear 0s infinite;animation:top 21s linear 0s infinite;}
.yi_guang_03{-webkit-animation:top 19s linear 0s infinite;animation:top 19s linear 0s infinite;}
.yi_guang_04{-webkit-animation:top 27s linear 0s infinite;animation:top 27s linear 0s infinite;}
.yi_guang_05{-webkit-animation:top 24s linear 0s infinite;animation:top 24s linear 0s infinite;}
.yi_guang_06{-webkit-animation:top 15s linear 0s infinite;animation:top 15s linear 0s infinite;}
.yi_guang_07{-webkit-animation:top 18s linear 0s infinite;animation:top 18s linear 0s infinite;}
.yi_guang_08{-webkit-animation:top 14s linear 0s infinite;animation:top 14s linear 0s infinite;}
.yi_guang_09{-webkit-animation:top 22s linear 0s infinite;animation:top 22s linear 0s infinite;}
.yi_guang_10{-webkit-animation:bottom 14s linear 0s infinite;animation:bottom 14s linear 0s infinite;}
.yi_guang_11{-webkit-animation:bottom 22s linear 0s infinite;animation:bottom 22s linear 0s infinite;}
.yi_guang_12{-webkit-animation:bottom 18s linear 0s infinite;animation:bottom 19s linear 0s infinite;}
.yi_guang_13{-webkit-animation:bottom 15s linear 0s infinite;animation:bottom 15s linear 0s infinite;}
.yi_guang_14{-webkit-animation:bottom 24s linear 0s infinite;animation:bottom 24s linear 0s infinite;}
.yi_guang_15{-webkit-animation:bottom 16s linear 0s infinite;animation:bottom 16s linear 0s infinite;}
.yi_guang_16{-webkit-animation:bottom 19s linear 0s infinite;animation:bottom 19s linear 0s infinite;}
.yi_guang_17{-webkit-animation:bottom 30s linear 0s infinite;animation:bottom 30s linear 0s infinite;}
.yi_guang_18{-webkit-animation:bottom 27s linear 0s infinite;animation:bottom 27s linear 0s infinite;}
.yi_guang_19{-webkit-animation:left 20s linear 0s infinite;animation:left 20s linear 0s infinite;}
.yi_guang_20{-webkit-animation:left 28s linear 0s infinite;animation:left 28s linear 0s infinite;}
.yi_guang_21{-webkit-animation:left 24s linear 0s infinite;animation:left 24s linear 0s infinite;}
.yi_guang_22{-webkit-animation:left 21s linear 0s infinite;animation:left 21s linear 0s infinite;}
.yi_guang_23{-webkit-animation:right 30s linear 0s infinite;animation:right 30s linear 0s infinite;}
.yi_guang_24{-webkit-animation:right 22s linear 0s infinite;animation:right 22s linear 0s infinite;}
.yi_guang_25{-webkit-animation:right 25s linear 0s infinite;animation:right 25s linear 0s infinite;}
.yi_guang_26{-webkit-animation:right 27s linear 0s infinite;animation:right 27s linear 0s infinite;}
.stars{position:absolute;z-index:1;top:385px;left:838px;top:50%;left:50%;}
.start img{width:100%;height:100%;}
.stars_01{width:32px;height:32px;-webkit-animation:stars 5s linear 0s infinite;animation:stars 5s linear 0s infinite;}
.stars_02{width:20px;height:20px;-webkit-animation:stars 4s linear 0s infinite;animation:stars 4s linear 0s infinite;}
.stars_03{width:14px;height:14px;-webkit-animation:stars_1 5s linear 0s infinite;animation:stars_1 5s linear 0s infinite;}
.stars_04{width:10px;height:10px;-webkit-animation:stars_1 3s linear 0s infinite;animation:stars_1 3s linear 0s infinite;}

附件:下载该文件资源,减少时间成本(增值服务)