<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>没时间解释了，快上车</title>
</head>
<body>
<style>
.nd-car-wrap{left:50%;position:absolute; z-index:999;}
/**大车出场方式开始**/
.nd-car-wrap.nd-front{
-moz-animation:frontCarMove 16s infinite;
-webkit-animation:frontCarMove 16s infinite;
animation:frontCarMove 16s infinite;
margin-left:208px;
top:464px;
}
@-moz-keyframes frontCarMove{
0%{
-moz-animation-timing-function:ease-out;
-moz-transform:translate3d(800px,0,0);
}
15%,25%{
-moz-animation-timing-function:ease-in;
-moz-transform:translate3d(0,0,0);
}
50%,100%{-moz-transform:translate3d(-1500px,0,0);}
}
@-webkit-keyframes frontCarMove{
0%{
-webkit-animation-timing-function:ease-out;
-webkit-transform:translate3d(800px,0,0);
}
15%,25%{
-webkit-animation-timing-function:ease-in;
-webkit-transform:translate3d(0,0,0);
}
50%,100%{-webkit-transform:translate3d(-1500px,0,0);}
}
@keyframes frontCarMove{
0%{
animation-timing-function:ease-out;
transform:translate3d(800px,0,0);
}
15%,25%{
animation-timing-function:ease-in;
transform:translate3d(0,0,0);
}
50%,100%{transform:translate3d(-1500px,0,0);}
}
/**大车出场方式结束**/
/**小车出场方式开始**/
@-moz-keyframes backCarMove{
0%{
-moz-animation-timing-function:ease-out;
-moz-transform:translate3d(0,0,0) scale(-.3,.3);
}
15%,25%{
-moz-animation-timing-function:ease-in;
-moz-transform:translate3d(600px,0,0) scale(-.3,.3);
}
50%,100%{-moz-transform:translate3d(2200px,0,0) scale(-.3,.3);}
}
@-webkit-keyframes backCarMove{
0%{
-webkit-animation-timing-function:ease-out;
-webkit-transform:translate3d(0,0,0) scale(-.3,.3);
}
15%,25%{
-webkit-animation-timing-function:ease-in;
-webkit-transform:translate3d(600px,0,0) scale(-.3,.3);
}
50%,100%{-webkit-transform:translate3d(2200px,0,0) scale(-.3,.3);}
}
@keyframes backCarMove{
0%{
animation-timing-function:ease-out;
transform:translate3d(0,0,0) scale(-.3,.3);
}
15%,25%{
animation-timing-function:ease-in;
transform:translate3d(600px,0,0) scale(-.3,.3);
}
50%,100%{transform:translate3d(2200px,0,0) scale(-.3,.3);}
}
.nd-car-wrap.nd-back{
-moz-animation:backCarMove 16s 8s infinite both;
-webkit-animation:backCarMove 16s 8s infinite both;
animation:backCarMove 16s 8s infinite both;
margin-left:-1300px;
top:455px;
}
/**小车出场方式结束**/
/**哆嗦吧 老司机开始**/
@-moz-keyframes carShake{
0%{-moz-transform:translate3d(0,0,0);}
100%{-moz-transform:translate3d(0,-1px,0);}
}
@-webkit-keyframes carShake{
0%{-webkit-transform:translate3d(0,0,0);}
100%{-webkit-transform:translate3d(0,-1px,0);}
}
@keyframes carShake{
0%{transform:translate3d(0,0,0);}
100%{transform:translate3d(0,-1px,0);}
}
.nd-car{
-moz-animation:carShake .1s infinite alternate linear;
-webkit-animation:carShake .1s infinite alternate linear;
animation:carShake .1s infinite alternate linear;
background:url(http://7arnu9.com1.z0.glb.clouddn.com/carcar-body-1.png) no-repeat;
height:160px;
width:340px;
}
/**哆嗦吧 老司机结束**/
/**小车开始**/
.nd-car-wrap.nd-back .nd-car:before{
background:url(http://7arnu9.com1.z0.glb.clouddn.com/carcar-body-1.png) 282px -85px;
content:'';
height:24px;
left:58px;
position:absolute;
top:85px;
-moz-transform:scale(-1,1);
-webkit-transform:scale(-1,1);
transform:scale(-1,1);
width:34px;
}
/***车轱辘开始**/
.nd-wheel{
-moz-animation:wheelRotate 16s infinite both;
-webkit-animation:wheelRotate 16s infinite both;
animation:wheelRotate 16s infinite both;
background:url(http://7arnu9.com1.z0.glb.clouddn.com/carcar-tyre.png);
height:42px;
position:absolute;
top:115px;
width:42px;
}
.nd-wheel.nd-front{left:39px;}
.nd-wheel.nd-back{left:248px;}
.nd-car-wrap.nd-back .nd-wheel{
-moz-animation-delay:8s;
-webkit-animation-delay:8s;
animation-delay:8s;
}
@-moz-keyframes wheelRotate{
0%{
-moz-animation-timing-function:ease-out;
-moz-transform:rotateZ(0);
}
15%,25%{
-moz-animation-timing-function:ease-in;
-moz-transform:rotateZ(-2250deg);
}
50%,100%{-moz-transform:rotateZ(-6000deg);}
}
@-webkit-keyframes wheelRotate{
0%{
-webkit-animation-timing-function:ease-out;
-webkit-transform:rotateZ(0);
}
15%,25%{
-webkit-animation-timing-function:ease-in;
-webkit-transform:rotateZ(-2250deg);
}
50%,100%{-webkit-transform:rotateZ(-6000deg);}
}
@keyframes wheelRotate{
0%{
animation-timing-function:ease-out;
transform:rotateZ(0);
}
15%,25%{
animation-timing-function:ease-in;
transform:rotateZ(-2250deg);
}
50%,100%{transform:rotateZ(-6000deg);}
}
/**车轱辘哦结束**/
*{ overflow:hidden}
/*-end:头图-*/
</style>
<div class="car">
<!--小车-->
<div class="nd-car-wrap nd-back">
<p class="nd-car">
<!--前轱辘-->
<span class="nd-wheel nd-front"></span>
<!--后轱辘-->
<span class="nd-wheel nd-back"></span>
</p>
</div>
<!--大车-->
<div class="nd-car-wrap nd-front">
<p class="nd-car">
<!--前轱辘-->
<span class="nd-wheel nd-front"></span>
<!--后轱辘-->
<span class="nd-wheel nd-back"></span>
</p>
</div>
</div>
</body>
</html>
网友评论