Pure CSS3 to make realistic car motion animations

Brief tutorials

This is a real-life car motion animation effect made with pure CSS3. In this special effect, all the elements are rendered by CSS and no images are used. It makes the visual effect of the car movement by the left and right shaking of the road zebra crossing.

How to use

HTML structure

The HTML structure of the entire car motion animation is as follows:

<div class= "Car" > <div class= "Body" > <div class= "mirror-wrap" > <div class= "Mirror-inner" >    <div class= "Mirror" > <div class= "Shine" ></div> </div> </div>      </div> <div class= "Middle" > <div class= "Top" > <div class= "line" ></div> </div> <div class= "Bottom" > <div class= "Lights" > <div class= "line" &GT;&LT;/DIV&G        T      </div> </div> </div> <div class= "Bumper" > <div class= "Top" ></div> <div class= "Middle" data-numb= "..." ></div> <div class= "Bottom" ></div> </div> </ div> <div class= "tyres" > <div class= "Tyre back" ></div> <div class= "Tyre front" ></div&  Gt </div></div><div class= "Road-wrap" > <div class= "Road" > <div class= "Lane-wrap" > < Div class= "Lane" > <div></div> <div></div> <div></div> <div&gt ;</div> <div></div> <div></div> <div></div> <div& gt;</div> <div></div> <div></div> <div></div> </div > </div> </div></div>

CSS Styles

In CSS styles, cars are constructed primarily through the before and: after pseudo-elements of individual car components. The whole effect uses 4 animation animations, namely: Shine Front windshield of the streamer animation, suspension body sway animation, Lane road around the motion animation and Steer Lane zebra animation.

@keyframes shine{0%,80%,100%{-webkit-transform:translatex ( -55px) rotate (24deg);  Transform:translatex ( -55px) rotate (24deg); } 5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{background-color: #2d2d2d} 0%,10%,20%,30%,40%,50%,60%,70%,80%,90%,100%{            Background-color: #4d4d4d} 33%,44%{-webkit-transform:translatex (30px) rotate ( -14deg);  Transform:translatex (30px) rotate ( -14deg);            } 66%{-webkit-transform:translatex (0px) rotate ( -10deg);  Transform:translatex (0px) rotate ( -10deg);            }} @keyframes lane{0%{-webkit-transform:translatey (320px);  Transform:translatey (320px);            } 100%{-webkit-transform:translatey ( -160px);  Transform:translatey ( -160px);            }} @keyframes steer{0%,100%{-webkit-transform:translatex ( -15px) rotate (5deg);  Transform:translatex ( -15px) rotate (5deg);            } 50%{-webkit-transform:translatex (15px) rotate ( -5deg); Transform:translatex (15px) rotate ( -5deg)}} @keyframes suspension{0%,75%,100%{    -webkit-transform:rotate (3DEG); Transform:rotate (3DEG)} 10%,30%,50%,70%,90%{top:0} 20%,40%,60%,80%,100%{top:-1px} 25%,50%{-webkit-transform:rotat            E ( -3deg); Transform:rotate ( -3DEG)} 20%{-webkit-transform:rotate (0deg); Transform:rotate (0deg)} 90%{-webkit-transform:rotate ( -1deg); Transform:rotate ( -1DEG)}}

The above is pure CSS3 production of realistic car sports animation content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

