这篇“CSS怎么实现货车loader的效果”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“CSS怎么实现货车loader的效果”，给大家总结了以下内容，具有一定借鉴价值，内容详细步骤清晰，细节处理妥当，希望大家通过这篇文章有所收获，下面让我们一起来看看具体内容吧。
代码解读
定义dom，容器代表卡车，包含的2个子元素代表车头和尾气；<hr>代表道路：
<divclass="truck">
<spanclass="cab"></span>
<spanclass="smoke"></span>
</div>
<hr>
居中显示，同时道路与页面之间留出空间：
body{
margin:10%;
padding-top:10%;
}
画出卡车车厢：
.truck{
width:15em;
height:5em;
font-size:10px;
background-color:#444;
border-radius:0.4em;
}
用伪元素画出车厢的车轮：
.truck{
position:relative;
}
.truck::before,
.truck::after{
content:'';
position:absolute;
box-sizing:border-box;
width:2em;
height:2em;
background-color:#444;
border:0.1emsolidwhite;
border-radius:50%;
bottom:-1em;
}
.truck::before{
left:0.6em;
}
.truck::after{
right:0.6em;
}
画出车头：
.cab{
position:absolute;
width:3.3em;
height:2.5em;
background-color:#333;
left:-3.5em;
bottom:0;
border-radius:40%00.4em0.4em;
}
.cab::before{
content:'';
position:absolute;
width:2em;
height:1.5em;
background-color:#333;
top:-1.5em;
right:0;
border-radius:100%000;
}
画出车头的车轮：
.cab::after{
content:'';
position:absolute;
box-sizing:border-box;
width:2em;
height:2em;
background-color:#444;
border:0.1emsolidwhite;
border-radius:50%;
bottom:-1em;
left:0.5em;
}
画出尾气的初始状态：
.smoke,
.smoke::before,
.smoke::after{
content:'';
position:absolute;
width:1em;
height:1em;
background-color:#333;
right:-0.1em;
bottom:-0.5em;
border-radius:50%;
}
增加排出尾气的动画：
.smoke{
animation:smoke-12sinfinite;
}
.smoke::before{
animation:smoke-22sinfinite;
}
.smoke::after{
animation:smoke-32sinfinite;
}
@keyframessmoke-1{
to{
width:3em;
height:3em;
right:-3em;
bottom:0.5em;
}
}
@keyframessmoke-2{
to{
width:2.5em;
height:2.5em;
right:-6em;
bottom:0.8em;
}
}
@keyframessmoke-3{
to{
width:3.5em;
height:3.5em;
right:-4em;
bottom:0.2em;
}
}
增加尾气的飘散效果：
.smoke{
animation:
drift2sinfinite,
smoke-12sinfinite;
}
.smoke::before{
animation:
drift3sinfinite,
smoke-23sinfinite;
}
.smoke::after{
animation:
drift4sinfinite,
smoke-34sinfinite;
}
@keyframesdrift{
0%,100%{
filter:opacity(0);
}
15%{
filter:opacity(0.9);
}
}
增加卡车行驶的动画效果：
.truck{
animation:
move5sinfinite;
}
@keyframesmove{
0%{
margin-left:90%;
}
50%{
margin-left:45%;
}
100%{
margin-left:0;
}
0%,100%{
filter:opacity(0);
}
10%,90%{
filter:opacity(1);
}
}
增加卡片行驶中颠簸的动画效果：
.truck{
animation:
put-put2sinfinite,
move10sinfinite;
}
@keyframesput-put{
0%{
margin-top:0;
height:5em;
}
5%{
margin-top:-0.2em;
height:5.2em;
}
20%{
margin-top:-0.1em;
height:5em;
}
35%{
margin-top:0.1em;
height:4.9em;
}
40%{
margin-top:-0.1em;
height:5.1em;
}
60%{
margin-top:0.1em;
height:4.9em;
}
75%{
margin-top:0;
height:5em;
}
80%{
margin-top:-0.4em;
height:5.2em;
}
100%{
margin-top:0.1em;
height:4.9em;
}
}
1.行内样式，最直接最简单的一种，直接对HTML标签使用style=""。2.内嵌样式，就是将CSS代码写在之间，并且用
进行声明。3.外部样式，其中链接样式是使用频率最高，最实用的样式，只需要在之间加上
感谢您的阅读，希望您对“CSS怎么实现货车loader的效果”这一关键问题有了一定的理解，具体使用情况还需要大家自己动手实验使用过才能领会，快去试试吧，如果想阅读更多相关知识点的文章，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
