怎么使用纯css代码实现赛车的loader动画效果

这篇文章主要介绍怎么使用纯CSS代码实现赛车的loader动画效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

　　代码解读

　　定义dom，容器中包含1个.car元素，它的2个子元素分别代表车身和车轮：

　　<figureclass="loader">

　　<divclass="car">

　　<spanclass="body"></span>

　　<spanclass="wheels"></span>

　　</div>

　　</figure>

　　居中显示：

　　body{

　　margin:0;

　　height:100vh;

　　display:flex;

　　align-items:center;

　　justify-content:center;

　　background-color:#333;

　　}

　　定义容器尺寸和车的颜色：

　　.loader{

　　width:11.7em;

　　height:4.2em;

　　color:lightcyan;

　　position:relative;

　　}

　　画出底盘：

　　.car{

　　position:absolute;

　　width:inherit;

　　height:2em;

　　background-color:currentColor;

　　top:1.5em;

　　border-radius:05em1em0/04em1em0;

　　}

　　画出尾冀：

　　.car::before{

　　content:'';

　　position:absolute;

　　width:0;

　　height:0;

　　border:0.6emsolidtransparent;

　　border-left-width:0;

　　border-right-color:currentColor;

　　transfORM-origin:left;

　　transform:rotate(-45deg);

　　top:-0.5em;

　　}

　　（这时看起来有点儿像飞机，哈哈~~）

　　画出车身：

　　.body{

　　position:absolute;

　　width:7.5em;

　　height:3.5em;

　　box-sizing:border-box;

　　border:0.4emsolid;

　　border-radius:3em4.5em00/3em4em00;

　　top:-1.5em;

　　left:1.2em;

　　}

　　用伪元素画出车窗：

　　.body::before{

　　content:'';

　　position:absolute;

　　width:3.5em;

　　height:inherit;

　　background-color:currentColor;

　　border-top-left-radius:inherit;

　　left:-0.4em;

　　top:-0.4em;

　　}

　　画出车轮的轮廓：

　　.wheels::before,

　　.wheels::after{

　　content:'';

　　position:absolute;

　　box-sizing:border-box;

　　width:2.6em;

　　height:2.6em;

　　background-color:#333;

　　border-radius:50%;

　　bottom:-1em;

　　}

　　画出轮毂：

　　.wheels::before,

　　.wheels::after{

　　border:0.3emsolid#333;

　　background-image:

　　linear-gradient(

　　135deg,

　　transparent45%,

　　currentColor46%,currentColor54%,

　　transparent55%

　　),

　　linear-gradient(

　　90deg,

　　transparent45%,

　　currentColor46%,currentColor54%,

　　transparent55%

　　),

　　linear-gradient(

　　45deg,

　　transparent45%,

　　currentColor46%,currentColor54%,

　　transparent55%

　　),

　　linear-gradient(

　　0deg,

　　transparent45%,

　　currentColor46%,currentColor54%,

　　transparent55%

　　),

　　radial-gradient(

　　currentColor29%,

　　transparent30%,transparent50%,

　　currentColor51%

　　);

　　}

　　把车轮定位到左右两侧：

　　.wheels::before{

　　left:1.2em;

　　}

　　.wheels::after{

　　right:0.8em;

　　}

　　接下来制作动画效果。

　　增加表示风影的dom元素.strikes，它包含5个子元素：

　　<figureclass="loader">

　　<pclass="car">

　　<spanclass="body"></span>

　　<spanclass="wheels"></span>

　　</p>

　　<pclass="strikes">

　　<span></span>

　　<span></span>

　　<span></span>

　　<span></span>

　　<span></span>

　　</p>

　　</figure>

　　画出5段短细线：

　　.strikes{

　　position:absolute;

　　width:1em;

　　height:inherit;

　　border:1pxdashedwhite;

　　display:flex;

　　flex-direction:column;

　　justify-content:space-between;

　　}

　　.strikesspan{

　　height:0.1em;

　　background-color:lightcyan;

　　}

　　增加风影飘逝的动画效果，定义css变量，设置动画延时：

　　.strikesspan{

　　animation:drift0.2slinearinfinite;

　　animation-delay:calc((var(--n)-1)*0.05s);

　　}

　　@keyframesdrift{

　　from{

　　transform:translate(3.5em);

　　}

　　to{

　　transform:translate(-8em);

　　filter:opacity(0);

　　}

　　}

　　.strikesspan:nth-child(1){

　　--n:1;

　　}

　　.strikesspan:nth-child(2){

　　--n:2;

　　}

　　.strikesspan:nth-child(3){

　　--n:3;

　　}

　　.strikesspan:nth-child(4){

　　--n:4;

　　}

　　.strikesspan:nth-child(5){

　　--n:5;

　　}

　　增加轮子转动动画效果：

　　.wheels::before,

　　.wheels::after{

　　animation:rotating0.5slinearinfinite;

　　}

　　@keyframesrotating{

　　to{

　　transform:rotate(1turn);

　　}

　　}

　　增加车身颠簸的动画效果：

　　.car{

　　animation:run0.25slinearinfinite;

　　}

　　@keyframesrun{

　　0%{

　　transform:translate(0.2em,0.1em)rotate(0deg);

　　}

　　20%{

　　transform:translate(0.1em,0.2em)rotate(1deg);

　　}

　　40%{

　　transform:translate(0.1em,-0.1em)rotate(-1deg);

　　}

　　60%{

　　transform:translate(-0.1em,0.2em)rotate(0deg);

　　}

　　80%{

　　transform:translate(-0.1em,0.1em)rotate(1deg);

　　}

　　100%{

　　transform:translate(0.2em,0.1em)rotate(-1deg);

　　}

　　}

以上是“怎么使用纯css代码实现赛车的loader动画效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网VUE频道！