css3蒙版运动,纯CSS3制作逼真的汽车运动动画

简要教程

这是一款使用纯CSS3制作的逼真汽车运动动画特效。该特效中，所有元素都是通过CSS渲染得到的，没有使用任何图片。它通过公路斑马线的左右晃动来制作出汽车运动的视觉效果。

使用方法

HTML结构

整个汽车运动动画的HTML结构如下：

CSS样式

CSS样式中主要通过各个汽车组件的:before和:after伪元素来构造汽车。整个特效使用了4个animation动画，分别是：shine前挡风玻璃的流光动画，suspension车身左右摇晃动画，lane公路左右移动动画和steer车道斑马线动画。@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(