html汽车跑动特效,纯CSS3实现汽车行驶动画 特效源码！

效果图

各位朋友大家好！

今天给大家带来的是 纯CSS3实现汽车行驶动画

看完效果图以后 是不是很炫酷！

想要文件版源码的，请加穷522323792

废话不多说，上源码

CSS：

body{

margin:0;

color:#444;

background:#00c380;

font:300 18px/18px Roboto, sans-serif;

}

*,:after,:before{box-sizing:border-box}

.pull-left{float:left}

.pull-right{float:right}

.clearfix:after,.clearfix:before{content:'';display:table}

.clearfix:after{clear:both;display:block}

body{text-align:center;padding:80px;padding-top:

0;overflow:hidden}

.car .mirror-wrap:before,

.car .mirror-wrap:after,

.car .mirror-inner:before,

.car .mirror-inner:after,

.car .middle .top:before,

.car .middle .top:after,

.car .lights:before,

.car .lights:after,

.car .bumper .top:before,

.car .bumper .top:after,

.car .bumper .middle:before,

.car .tyres .tyre:before,

.car .tyres .tyre:after

{

content:'';

position:absolute;

}

.car{

z-index:1;

margin:0 auto;

position:relative;

display:inline-block;

}

.car .body{

z-index:1;

position:relative;

-webkit-animation:suspension 4s linear infinite;

animation:suspension 4s linear infinite;

}

.car .mirror-wrap{

width:88px;

height:30px;

margin:auto;

position:relative;

background-color:#fff;

border-top-left-radius:45px 10px;

border-top-right-radius:45px 10px;

}

.car .mirror-wrap:before,

.car .mirror-wrap:after{

top:8px;

border:5px solid #1a1c20;

border-top:15px solid transparent;

}

.car .mirror-wrap:before{

left:-5px;

border-left:0 solid transparent;

}

.car .mirror-wrap:after{

right:-5px;

border-right:0 solid transparent;

}

.car .mirror-inner{

top:2px;

width:inherit;

height:inherit;

margin:inherit;

position:inherit;

background-color:#1a1c20;

border-top-left-radius:50px 8px;

border-top-