动画小例子
2016-07-07 08:35
281 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> -->
<title>Document</title>
<link
rel="stylesheet"
href="animate.css">
<style>
/* dian */
@-webkit-keyframes move0{
from{
webkit-transform: translateZ(10px);
-ms-transform: translateZ(10px);
-o-transform: translateZ(10px);
transform: translateZ(10px);
}
to{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
}
/* red */
@-webkit-keyframes move{
from{
webkit-transform: translateX(-1000px);
-ms-transform: translateX(-1000px);
-o-transform: translateX(-1000px);
transform: translateX(-1000px);
}
to{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
}
/* blue */
@-webkit-keyframes
move1{
from{
webkit-transform: translateY(-1000px);
-ms-transform: translateY(-1000px);
-o-transform: translateY(-1000px);
transform: translateY(-1000px);
}
to{
webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
/* yellow */
@-webkit-keyframes
move2{
from{
webkit-transform: translateY(1000px);
-ms-transform: translateY(1000px);
-o-transform: translateY(1000px);
transform: translateY(1000px);
}
to{
webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
/* blue D */
@-webkit-keyframes
move3{
from{
webkit-transform: translateX(1000px) translateY(-1000px);
-ms-transform: translateX(1000px) translateY(-1000px);
-o-transform: translateX(1000px) translateY(-1000px);
transform: translateX(1000px) translateY(-1000px);
}
to{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
}
/* gray */
@-webkit-keyframes move4{
from{
webkit-transform: translateX(1000px) translateY(-1000px);
-ms-transform: translateX(1000px) translateY(-1000px);
-o-transform: translateX(1000px) translateY(-1000px);
transform: translateX(1000px) translateY(-1000px);
}
to{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
}
/* red2 */
@-webkit-keyframes move5{
from{
webkit-transform: translateX(1000px) translateY(-1000px);
-ms-transform: translateX(1000px) translateY(-1000px);
-o-transform: translateX(1000px) translateY(-1000px);
transform: translateX(1000px) translateY(-1000px);
}
to{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
}
/* green */
@-webkit-keyframes move6{
from{
webkit-transform: translateX(1000px) translateY(-1000px);
-ms-transform: translateX(1000px) translateY(-1000px);
-o-transform: translateX(1000px) translateY(-1000px);
transform: translateX(1000px) translateY(-1000px);
}
to{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
}
/* gray2 */
@-webkit-keyframes move7{
from{
webkit-transform: translateX(1000px) translateY(-1000px);
-ms-transform: translateX(1000px) translateY(-1000px);
-o-transform: translateX(1000px) translateY(-1000px);
transform: translateX(1000px) translateY(-1000px);
}
to{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
}
/* blue2 */
@-webkit-keyframes move8{
from{
webkit-transform: translateY(1000px);
-ms-transform: translateY(1000px);
-o-transform: translateY(1000px);
transform: translateY(1000px);
}
to{
webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
/* white */
@-webkit-keyframes move9{
from{
webkit-transform: translateZ(1000px);
-ms-transform: translateZ(1000px);
-o-transform: translateZ(1000px);
transform: translateZ(1000px);
}
to{
webkit-transform: translateZ(0px);
-ms-transform: translateZ(0px);
-o-transform: translateZ(0px);
transform: translateZ(0px);
}
}
/* re */
@-webkit-keyframes move10{
from{
webkit-transform: translateZ(1000px);
-ms-transform: translateZ(1000px);
-o-transform: translateZ(1000px);
transform: translateZ(1000px);
}
to{
webkit-transform: translateZ(0px);
-ms-transform: translateZ(0px);
-o-transform: translateZ(0px);
transform: translateZ(0px);
}
}
/* e */
@-webkit-keyframes move11{
from{
webkit-transform: translateZ(1000px);
-ms-transform: translateZ(1000px);
-o-transform: translateZ(1000px);
transform: translateZ(1000px);
}
to{
webkit-transform: translateZ(0px);
-ms-transform: translateZ(0px);
-o-transform: translateZ(0px);
transform: translateZ(0px);
}
}
/* maker */
@-webkit-keyframes move12{
from{
webkit-transform: translateZ(1000px);
-ms-transform: translateZ(1000px);
-o-transform: translateZ(1000px);
transform: translateZ(1000px);
}
to{
webkit-transform: translateZ(0px);
-ms-transform: translateZ(0px);
-o-transform: translateZ(0px);
transform: translateZ(0px);
}
}
/* dream */
@-webkit-keyframes move13{
from{
webkit-transform: translateZ(-1000px) ;
-ms-transform: translateZ(-1000px);
-o-transform: translateZ(-1000px);
transform: translateZ(-1000px);
}
to{
webkit-transform: translateZ(10px) scale(1);
-ms-transform: translateZ(10px) scale(1);
-o-transform: translateZ(10px) scale(1);
transform: translateZ(10px) scale(1);
}
}
/* jiantou */
@-webkit-keyframes
move14{
from{
webkit-transform: translateZ(20px);
-ms-transform: translateZ(20px);
-o-transform: translateZ(20px);
transform: translateZ(20px);
}
to{
webkit-transform: translateZ(0px);
-ms-transform: translateZ(0px);
-o-transform: translateZ(0px);
transform: translateZ(0px);
}
}
/* music */
@-webkit-keyframes move15{
from{
webkit-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
to{
webkit-transform: rotateZ(36000deg);
-ms-transform: rotateZ(36000deg);
-o-transform: rotateZ(36000deg);
transform: rotateZ(36000deg);
}
}
/* 红流星 */
@-webkit-keyframes move16{
from{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
to{
webkit-transform: translateY(100px) translateX(500px);
-ms-transform: translateY(100px) translateX(500px);
-o-transform: translateY(100px) translateX(500px);
transform: translateY(100px) translateX(500px);
}
}
/* 黄流星 */
@-webkit-keyframes move17{
from{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
to{
webkit-transform: translateX(-500px) translateY(-200px)
;
-ms-transform: translateX(-500px) translateY(-200px)
;
-o-transform: translateX(-500px) translateY(-200px)
;
transform: translateX(-500px) translateY(-200px)
;
}
}
/* 青流星 */
@-webkit-keyframes move18{
from{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
to{
webkit-transform: translateY(300px) translateX(-550px);
-ms-transform: translateY(300px) translateX(-550px);
-o-transform: translateY(300px) translateX(-550px);
transform: translateY(300px) translateX(-550px);
}
}
body{
perspective:
1000px;
-webkit-transform-style:
preserve-3d;
-moz-transform-style:
preserve-3d;
-ms-transform-style:
preserve-3d;
transform-style:
preserve-3d;
}
.father{
margin:
100px
auto;
width:
750px;
height:
1297px;
background-image:
url("img/大背景.png")
;
background-repeat:
no-repeat;
-webkit-transform-style:
preserve-3d;
-moz-transform-style:
preserve-3d;
-ms-transform-style:
preserve-3d;
transform-style:
preserve-3d;
}
.dian img{
margin:
64px 41px
46px 632px;
-webkit-animation:"move0"
1s ease infinite
;
-o-animation:"move0"
1s ease infinite
;
animation:"move0"
1s ease infinite
;
}
.content{
margin:
80px
auto;
text-align: center;
position:
relative;
top:
0;
left:
64px;
}
.red{
position:
absolute;
top:
0;
left:
0;
z-index:
1;
-webkit-animation:"move"
1.5s ease
1 ;
-o-animation:"move"
1.5s ease
1 ;
animation:"move"
1.5s ease
1 ;
}
.blue{
position:
absolute;
top:
0;
right:
133px;
z-index:
1;
-webkit-animation:"move1"
1.5s ease
1 ;
-o-animation:"move1"
1.5s ease
1 ;
animation:"move1"
1.5s ease
1 ;
}
.yellow{
position:
absolute;
top:
251px;
left:
0;
z-index:
2;
-webkit-animation:"move2"
1.5s ease
1 ;
-o-animation:"move2"
1.5s ease
1 ;
animation:"move2"
1.5s ease
1 ;
}
.d{
position:
absolute;
top:
227px;
left:
0px;
z-index:
3;
-webkit-animation:"move3"
1.8s ease
1 0.3s ;
-o-animation:"move3"
1.8s ease
1 0.3s;
animation:"move3"
1.8s ease
1 0.3s;
}
.gray{
position:
absolute;
top:
140px;
left:
138px;
z-index:
3;
-webkit-animation:"move4"
1.8s ease
1 0.4s ;
-o-animation:"move4"
1.8s ease
1 0.4s;
animation:"move4"
1.8s ease
1 0.4s;
}
.red2{
position:
absolute;
top:
255px;
left:
167px;
z-index:
4;
-webkit-animation:"move5"
1.8s ease
1 0.5s ;
-o-animation:"move5"
1.8s ease
1 0.5s;
animation:"move5"
1.8s ease
1 0.5s;
}
.green{
position:
absolute;
top:
0px;
left:
241px;
z-index:
4;
-webkit-animation:"move6"
1.8s ease
1 0.5s ;
-o-animation:"move6"
1.8s ease
1 0.5s;
animation:"move6"
1.8s ease
1 0.5s;
}
.gray2{
position:
absolute;
top:
0px;
left:
328px;
z-index:
4;
-webkit-animation:"move7"
1.85s ease
1 0.5s ;
-o-animation:"move7"
1.85s ease
1 0.5s;
animation:"move7"
1.85s ease
1 0.5s;
}
.blue2{
position:
absolute;
top:
373px;
left:
165px;
z-index:
4;
-webkit-animation:"move8"
1.65s ease
1 ;
-o-animation:"move8"
1.65s ease
1 ;
animation:"move8"
1.65s ease
1 ;
}
.white{
position:
absolute;
top:
254px;
left:
29px;
z-index:
4;
-webkit-animation:"move9"
1.9s ease
1 0.7s ;
-o-animation:"move9"
1.9s ease
1 0.7s;
animation:"move9"
1.9s ease
1 0.7s;
}
.re{
position:
absolute;
top:
211px;
left:
137px;
z-index:
4;
-webkit-animation:"move10"
1.95s ease
1 0.8s ;
-o-animation:"move10"
1.95s ease
1 0.8s;
animation:"move10"
1.95s ease
1 0.8s;
}
.e{
position:
absolute;
top:
227px;
left:
241px;
z-index:
4;
-webkit-animation:"move11"
2s ease
1 0.9s;
-o-animation:"move11"
2s ease
1 0.9s;
animation:"move11"
2s ease
1 0.9s;
}
.maker{
position:
absolute;
top:
541px;
left:
166px;
z-index:
4;
-webkit-animation:"move12"
2s ease
1 0.85s ;
-o-animation:"move12"
2s ease
1 0.85s ;
animation:"move12"
2s ease
1 0.85s ;
}
.dream{
margin:
-260px
auto;
text-align: center;
position:
relative;
top:
0;
left:
-4px;
-webkit-animation:"move13"
2.1s ease
1 ;
-o-animation:"move13"
2.1s ease
1 ;
animation:"move13"
2.1s ease
1 ;
}
.dream1 p{
position:
absolute;
top:
960px;
left:
166px;
z-index:
3;
color:
#95989B;
font-size:
39px;
letter-spacing:
14px;
}
.dream p:hover{
text-shadow:-5px
-5px 5px
#00E9FD,0 0
5px #30FDCE,0
0 10px
#6CFFEC,0 5px
10px #22EAFD,
5px 5px
10px #00F0FD,5px
5px 15px
#00E9FD;
-webkit-transition:
0.5s;
-o-transition:
0.5s;
transition:
0.5s;
}
.dream2 img{
position:
absolute;
top:
1090px;
left:
86px;
z-index:
3;
}
.footer{
margin:
30px
auto;
text-align: center;
position:
relative;
top:
0;
left:
-5px;
-webkit-transform-style:
preserve-3d;
-moz-transform-style:
preserve-3d;
-ms-transform-style:
preserve-3d;
transform-style:
preserve-3d;
}
.jiantou{
position:
absolute;
top:
1242px;
left:
356px;
z-index:
3;
-webkit-animation:"move14"
1s ease infinite;
-o-animation:"move14"
1s ease infinite
;
animation:"move14"
1s ease infinite
;
}
.music{
position:
absolute;
top:
1210px;
left:
646px;
z-index:
3;
-webkit-animation:"move15"
100s ease infinite
;
-o-animation:"move15"
100s ease infinite
;
animation:"move15"
100s ease infinite
;
}
.liuxing img:nth-child(1){
position:
absolute;
top:
760px;
left:
0;
z-index:
2;
-webkit-animation:"move16"
1s ease infinite
;
-o-animation:"move16"
1s ease infinite
;
animation:"move16"
1s ease infinite
;
}
.liuxing img:nth-child(2){
position:
absolute;
top:
260px;
left:500px;
z-index:
2;
-webkit-animation:"move17"
1s ease infinite
;
-o-animation:"move17"
1s ease infinite
;
animation:"move17"
1s ease infinite
;
}
.liuxing img:nth-child(3){
position:
absolute;
top:
800px;
left:500px;
z-index:
2;
-webkit-animation:"move18"
1.2s ease infinite
;
-o-animation:"move18"
1.2s ease infinite
;
animation:"move18"
1.2s ease infinite
;
}
</style>
</head>
<body>
<div class="father">
<div
class="header">
<div
class="dian">
<img
src="img/dian.png"
alt="">
</div>
<div
class="tiao">
<img
src="img/loading.png"
alt="">
</div>
</div>
<div
class="content">
<div
class="yiceng">
<div
class="red">
<img
src="img/red.png"
alt="">
</div>
<div
class="yellow">
<img
src="img/yellow.png"
alt="">
</div>
<div
class="blue">
<img
src="img/blue.png"
alt="">
</div>
</div>
<div
class="erceng">
<div
class="d">
<img
src="img/蓝D.png"
alt="">
</div>
<div
class="gray">
<img
src="img/左灰.png"
alt="">
</div>
<div
class="red2">
<img
src="img/红D.png"
alt="">
</div>
<div
class="green">
<img
src="img/绿.png"
alt="">
</div>
<div
class="gray2">
<img
src="img/右灰.png"
alt="">
</div>
<div
class="blue2">
<img
src="img/蓝.png"
alt="">
</div>
<div
class="sanceng">
<div
class="white">
<img
src="img/白色D.png"
alt="">
</div>
<div
class="re">
<img
src="img/rw.png"
alt="">
</div>
<div
class="e">
<img
src="img/大E.png"
alt="">
</div>
<div
class="maker">
<img
src="img/maker.png"
alt="">
</div>
</div>
</div>
</div>
<div
class="dream">
<div
class="dream1">
<p>2015创想家盛典</p>
</div>
<div
class="dream2">
<img
src="img/dream.png"
alt="">
</div>
</div>
<div
class="footer">
<div
class="jiantou">
<img
src="img/jiantou.png"
alt="">
</div>
<div
class="music">
<img
src="img/music.png"
alt="">
</div>
<div
class="liuxing">
<img
src="img/红流星.png"
alt="">
<img
src="img/黄流星.png"
alt="">
<img
src="img/青流星.png"
alt="">
</div>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> -->
<title>Document</title>
<link
rel="stylesheet"
href="animate.css">
<style>
/* dian */
@-webkit-keyframes move0{
from{
webkit-transform: translateZ(10px);
-ms-transform: translateZ(10px);
-o-transform: translateZ(10px);
transform: translateZ(10px);
}
to{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
}
/* red */
@-webkit-keyframes move{
from{
webkit-transform: translateX(-1000px);
-ms-transform: translateX(-1000px);
-o-transform: translateX(-1000px);
transform: translateX(-1000px);
}
to{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
}
/* blue */
@-webkit-keyframes
move1{
from{
webkit-transform: translateY(-1000px);
-ms-transform: translateY(-1000px);
-o-transform: translateY(-1000px);
transform: translateY(-1000px);
}
to{
webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
/* yellow */
@-webkit-keyframes
move2{
from{
webkit-transform: translateY(1000px);
-ms-transform: translateY(1000px);
-o-transform: translateY(1000px);
transform: translateY(1000px);
}
to{
webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
/* blue D */
@-webkit-keyframes
move3{
from{
webkit-transform: translateX(1000px) translateY(-1000px);
-ms-transform: translateX(1000px) translateY(-1000px);
-o-transform: translateX(1000px) translateY(-1000px);
transform: translateX(1000px) translateY(-1000px);
}
to{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
}
/* gray */
@-webkit-keyframes move4{
from{
webkit-transform: translateX(1000px) translateY(-1000px);
-ms-transform: translateX(1000px) translateY(-1000px);
-o-transform: translateX(1000px) translateY(-1000px);
transform: translateX(1000px) translateY(-1000px);
}
to{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
}
/* red2 */
@-webkit-keyframes move5{
from{
webkit-transform: translateX(1000px) translateY(-1000px);
-ms-transform: translateX(1000px) translateY(-1000px);
-o-transform: translateX(1000px) translateY(-1000px);
transform: translateX(1000px) translateY(-1000px);
}
to{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
}
/* green */
@-webkit-keyframes move6{
from{
webkit-transform: translateX(1000px) translateY(-1000px);
-ms-transform: translateX(1000px) translateY(-1000px);
-o-transform: translateX(1000px) translateY(-1000px);
transform: translateX(1000px) translateY(-1000px);
}
to{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
}
/* gray2 */
@-webkit-keyframes move7{
from{
webkit-transform: translateX(1000px) translateY(-1000px);
-ms-transform: translateX(1000px) translateY(-1000px);
-o-transform: translateX(1000px) translateY(-1000px);
transform: translateX(1000px) translateY(-1000px);
}
to{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
}
/* blue2 */
@-webkit-keyframes move8{
from{
webkit-transform: translateY(1000px);
-ms-transform: translateY(1000px);
-o-transform: translateY(1000px);
transform: translateY(1000px);
}
to{
webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
/* white */
@-webkit-keyframes move9{
from{
webkit-transform: translateZ(1000px);
-ms-transform: translateZ(1000px);
-o-transform: translateZ(1000px);
transform: translateZ(1000px);
}
to{
webkit-transform: translateZ(0px);
-ms-transform: translateZ(0px);
-o-transform: translateZ(0px);
transform: translateZ(0px);
}
}
/* re */
@-webkit-keyframes move10{
from{
webkit-transform: translateZ(1000px);
-ms-transform: translateZ(1000px);
-o-transform: translateZ(1000px);
transform: translateZ(1000px);
}
to{
webkit-transform: translateZ(0px);
-ms-transform: translateZ(0px);
-o-transform: translateZ(0px);
transform: translateZ(0px);
}
}
/* e */
@-webkit-keyframes move11{
from{
webkit-transform: translateZ(1000px);
-ms-transform: translateZ(1000px);
-o-transform: translateZ(1000px);
transform: translateZ(1000px);
}
to{
webkit-transform: translateZ(0px);
-ms-transform: translateZ(0px);
-o-transform: translateZ(0px);
transform: translateZ(0px);
}
}
/* maker */
@-webkit-keyframes move12{
from{
webkit-transform: translateZ(1000px);
-ms-transform: translateZ(1000px);
-o-transform: translateZ(1000px);
transform: translateZ(1000px);
}
to{
webkit-transform: translateZ(0px);
-ms-transform: translateZ(0px);
-o-transform: translateZ(0px);
transform: translateZ(0px);
}
}
/* dream */
@-webkit-keyframes move13{
from{
webkit-transform: translateZ(-1000px) ;
-ms-transform: translateZ(-1000px);
-o-transform: translateZ(-1000px);
transform: translateZ(-1000px);
}
to{
webkit-transform: translateZ(10px) scale(1);
-ms-transform: translateZ(10px) scale(1);
-o-transform: translateZ(10px) scale(1);
transform: translateZ(10px) scale(1);
}
}
/* jiantou */
@-webkit-keyframes
move14{
from{
webkit-transform: translateZ(20px);
-ms-transform: translateZ(20px);
-o-transform: translateZ(20px);
transform: translateZ(20px);
}
to{
webkit-transform: translateZ(0px);
-ms-transform: translateZ(0px);
-o-transform: translateZ(0px);
transform: translateZ(0px);
}
}
/* music */
@-webkit-keyframes move15{
from{
webkit-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
to{
webkit-transform: rotateZ(36000deg);
-ms-transform: rotateZ(36000deg);
-o-transform: rotateZ(36000deg);
transform: rotateZ(36000deg);
}
}
/* 红流星 */
@-webkit-keyframes move16{
from{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
to{
webkit-transform: translateY(100px) translateX(500px);
-ms-transform: translateY(100px) translateX(500px);
-o-transform: translateY(100px) translateX(500px);
transform: translateY(100px) translateX(500px);
}
}
/* 黄流星 */
@-webkit-keyframes move17{
from{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
to{
webkit-transform: translateX(-500px) translateY(-200px)
;
-ms-transform: translateX(-500px) translateY(-200px)
;
-o-transform: translateX(-500px) translateY(-200px)
;
transform: translateX(-500px) translateY(-200px)
;
}
}
/* 青流星 */
@-webkit-keyframes move18{
from{
webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
to{
webkit-transform: translateY(300px) translateX(-550px);
-ms-transform: translateY(300px) translateX(-550px);
-o-transform: translateY(300px) translateX(-550px);
transform: translateY(300px) translateX(-550px);
}
}
body{
perspective:
1000px;
-webkit-transform-style:
preserve-3d;
-moz-transform-style:
preserve-3d;
-ms-transform-style:
preserve-3d;
transform-style:
preserve-3d;
}
.father{
margin:
100px
auto;
width:
750px;
height:
1297px;
background-image:
url("img/大背景.png")
;
background-repeat:
no-repeat;
-webkit-transform-style:
preserve-3d;
-moz-transform-style:
preserve-3d;
-ms-transform-style:
preserve-3d;
transform-style:
preserve-3d;
}
.dian img{
margin:
64px 41px
46px 632px;
-webkit-animation:"move0"
1s ease infinite
;
-o-animation:"move0"
1s ease infinite
;
animation:"move0"
1s ease infinite
;
}
.content{
margin:
80px
auto;
text-align: center;
position:
relative;
top:
0;
left:
64px;
}
.red{
position:
absolute;
top:
0;
left:
0;
z-index:
1;
-webkit-animation:"move"
1.5s ease
1 ;
-o-animation:"move"
1.5s ease
1 ;
animation:"move"
1.5s ease
1 ;
}
.blue{
position:
absolute;
top:
0;
right:
133px;
z-index:
1;
-webkit-animation:"move1"
1.5s ease
1 ;
-o-animation:"move1"
1.5s ease
1 ;
animation:"move1"
1.5s ease
1 ;
}
.yellow{
position:
absolute;
top:
251px;
left:
0;
z-index:
2;
-webkit-animation:"move2"
1.5s ease
1 ;
-o-animation:"move2"
1.5s ease
1 ;
animation:"move2"
1.5s ease
1 ;
}
.d{
position:
absolute;
top:
227px;
left:
0px;
z-index:
3;
-webkit-animation:"move3"
1.8s ease
1 0.3s ;
-o-animation:"move3"
1.8s ease
1 0.3s;
animation:"move3"
1.8s ease
1 0.3s;
}
.gray{
position:
absolute;
top:
140px;
left:
138px;
z-index:
3;
-webkit-animation:"move4"
1.8s ease
1 0.4s ;
-o-animation:"move4"
1.8s ease
1 0.4s;
animation:"move4"
1.8s ease
1 0.4s;
}
.red2{
position:
absolute;
top:
255px;
left:
167px;
z-index:
4;
-webkit-animation:"move5"
1.8s ease
1 0.5s ;
-o-animation:"move5"
1.8s ease
1 0.5s;
animation:"move5"
1.8s ease
1 0.5s;
}
.green{
position:
absolute;
top:
0px;
left:
241px;
z-index:
4;
-webkit-animation:"move6"
1.8s ease
1 0.5s ;
-o-animation:"move6"
1.8s ease
1 0.5s;
animation:"move6"
1.8s ease
1 0.5s;
}
.gray2{
position:
absolute;
top:
0px;
left:
328px;
z-index:
4;
-webkit-animation:"move7"
1.85s ease
1 0.5s ;
-o-animation:"move7"
1.85s ease
1 0.5s;
animation:"move7"
1.85s ease
1 0.5s;
}
.blue2{
position:
absolute;
top:
373px;
left:
165px;
z-index:
4;
-webkit-animation:"move8"
1.65s ease
1 ;
-o-animation:"move8"
1.65s ease
1 ;
animation:"move8"
1.65s ease
1 ;
}
.white{
position:
absolute;
top:
254px;
left:
29px;
z-index:
4;
-webkit-animation:"move9"
1.9s ease
1 0.7s ;
-o-animation:"move9"
1.9s ease
1 0.7s;
animation:"move9"
1.9s ease
1 0.7s;
}
.re{
position:
absolute;
top:
211px;
left:
137px;
z-index:
4;
-webkit-animation:"move10"
1.95s ease
1 0.8s ;
-o-animation:"move10"
1.95s ease
1 0.8s;
animation:"move10"
1.95s ease
1 0.8s;
}
.e{
position:
absolute;
top:
227px;
left:
241px;
z-index:
4;
-webkit-animation:"move11"
2s ease
1 0.9s;
-o-animation:"move11"
2s ease
1 0.9s;
animation:"move11"
2s ease
1 0.9s;
}
.maker{
position:
absolute;
top:
541px;
left:
166px;
z-index:
4;
-webkit-animation:"move12"
2s ease
1 0.85s ;
-o-animation:"move12"
2s ease
1 0.85s ;
animation:"move12"
2s ease
1 0.85s ;
}
.dream{
margin:
-260px
auto;
text-align: center;
position:
relative;
top:
0;
left:
-4px;
-webkit-animation:"move13"
2.1s ease
1 ;
-o-animation:"move13"
2.1s ease
1 ;
animation:"move13"
2.1s ease
1 ;
}
.dream1 p{
position:
absolute;
top:
960px;
left:
166px;
z-index:
3;
color:
#95989B;
font-size:
39px;
letter-spacing:
14px;
}
.dream p:hover{
text-shadow:-5px
-5px 5px
#00E9FD,0 0
5px #30FDCE,0
0 10px
#6CFFEC,0 5px
10px #22EAFD,
5px 5px
10px #00F0FD,5px
5px 15px
#00E9FD;
-webkit-transition:
0.5s;
-o-transition:
0.5s;
transition:
0.5s;
}
.dream2 img{
position:
absolute;
top:
1090px;
left:
86px;
z-index:
3;
}
.footer{
margin:
30px
auto;
text-align: center;
position:
relative;
top:
0;
left:
-5px;
-webkit-transform-style:
preserve-3d;
-moz-transform-style:
preserve-3d;
-ms-transform-style:
preserve-3d;
transform-style:
preserve-3d;
}
.jiantou{
position:
absolute;
top:
1242px;
left:
356px;
z-index:
3;
-webkit-animation:"move14"
1s ease infinite;
-o-animation:"move14"
1s ease infinite
;
animation:"move14"
1s ease infinite
;
}
.music{
position:
absolute;
top:
1210px;
left:
646px;
z-index:
3;
-webkit-animation:"move15"
100s ease infinite
;
-o-animation:"move15"
100s ease infinite
;
animation:"move15"
100s ease infinite
;
}
.liuxing img:nth-child(1){
position:
absolute;
top:
760px;
left:
0;
z-index:
2;
-webkit-animation:"move16"
1s ease infinite
;
-o-animation:"move16"
1s ease infinite
;
animation:"move16"
1s ease infinite
;
}
.liuxing img:nth-child(2){
position:
absolute;
top:
260px;
left:500px;
z-index:
2;
-webkit-animation:"move17"
1s ease infinite
;
-o-animation:"move17"
1s ease infinite
;
animation:"move17"
1s ease infinite
;
}
.liuxing img:nth-child(3){
position:
absolute;
top:
800px;
left:500px;
z-index:
2;
-webkit-animation:"move18"
1.2s ease infinite
;
-o-animation:"move18"
1.2s ease infinite
;
animation:"move18"
1.2s ease infinite
;
}
</style>
</head>
<body>
<div class="father">
<div
class="header">
<div
class="dian">
<img
src="img/dian.png"
alt="">
</div>
<div
class="tiao">
<img
src="img/loading.png"
alt="">
</div>
</div>
<div
class="content">
<div
class="yiceng">
<div
class="red">
<img
src="img/red.png"
alt="">
</div>
<div
class="yellow">
<img
src="img/yellow.png"
alt="">
</div>
<div
class="blue">
<img
src="img/blue.png"
alt="">
</div>
</div>
<div
class="erceng">
<div
class="d">
<img
src="img/蓝D.png"
alt="">
</div>
<div
class="gray">
<img
src="img/左灰.png"
alt="">
</div>
<div
class="red2">
<img
src="img/红D.png"
alt="">
</div>
<div
class="green">
<img
src="img/绿.png"
alt="">
</div>
<div
class="gray2">
<img
src="img/右灰.png"
alt="">
</div>
<div
class="blue2">
<img
src="img/蓝.png"
alt="">
</div>
<div
class="sanceng">
<div
class="white">
<img
src="img/白色D.png"
alt="">
</div>
<div
class="re">
<img
src="img/rw.png"
alt="">
</div>
<div
class="e">
<img
src="img/大E.png"
alt="">
</div>
<div
class="maker">
<img
src="img/maker.png"
alt="">
</div>
</div>
</div>
</div>
<div
class="dream">
<div
class="dream1">
<p>2015创想家盛典</p>
</div>
<div
class="dream2">
<img
src="img/dream.png"
alt="">
</div>
</div>
<div
class="footer">
<div
class="jiantou">
<img
src="img/jiantou.png"
alt="">
</div>
<div
class="music">
<img
src="img/music.png"
alt="">
</div>
<div
class="liuxing">
<img
src="img/红流星.png"
alt="">
<img
src="img/黄流星.png"
alt="">
<img
src="img/青流星.png"
alt="">
</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Gifski：一个跨平台的高质量 GIF 编码器
- 模仿动画的放大缩小容器
- jQuery 1.9.1源码分析系列（十五）动画处理之缓动动画核心Tween
- Android实现定制返回按钮动画效果的方法
- Android中ViewFlipper的使用及设置动画效果实例详解
- jQuery实现美观的多级动画效果菜单代码
- php判断GIF图片是否为动画的方法
- jQuery实现动画效果circle实例
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- 浅析JavaScript动画
- js排序动画模拟-插入排序
- javascript+HTML5的Canvas实现Lab单车动画效果
- 基于javascript实现漂亮的页面过渡动画效果附源码下载
- js实现按钮颜色渐变动画效果
- 超赞的jQuery图片滑块动画特效代码汇总
- jQuery实现连续动画效果实例分析
- 利用jquery制作滚动到指定位置触发动画
- jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
- jQuery实现带有洗牌效果的动画分页实例
- jQuery动画效果相关方法实例分析