本篇文章给大家带来的内容是关于如何使用CSS实现货车loader的效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
效果预览
代码解读
定义 dom，容器代表卡车，包含的 2 个子元素代表车头和尾气；<hr> 代表道路：
<div class="truck"> <span class="cab"></span> <span class="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.1em solid white;
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% 0 0.4em 0.4em;
}
.cab::before {
content: '';
position: absolute;
width: 2em;
height: 1.5em;
background-color: #333;
top: -1.5em;
right: 0;
border-radius: 100% 0 0 0;
}画出车头的车轮：
.cab::after {
content: '';
position: absolute;
box-sizing: border-box;
width: 2em;
height: 2em;
background-color: #444;
border: 0.1em solid white;
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-1 2s infinite;
}
.smoke::before {
animation: smoke-2 2s infinite;
}
.smoke::after {
animation: smoke-3 2s infinite;
}
@keyframes smoke-1 {
to {
width: 3em;
height: 3em;
right: -3em;
bottom: 0.5em;
}
}
@keyframes smoke-2 {
to {
width: 2.5em;
height: 2.5em;
right: -6em;
bottom: 0.8em;
}
}
@keyframes smoke-3 {
to {
width: 3.5em;
height: 3.5em;
right: -4em;
bottom: 0.2em;
}
}增加尾气的飘散效果：
.smoke {
animation:
drift 2s infinite,
smoke-1 2s infinite;
}
.smoke::before {
animation:
drift 3s infinite,
smoke-2 3s infinite;
}
.smoke::after {
animation:
drift 4s infinite,
smoke-3 4s infinite;
}
@keyframes drift {
0%, 100% {
filter: opacity(0);
}
15% {
filter: opacity(0.9);
}
}增加卡车行驶的动画效果：
.truck {
animation:
move 5s infinite;
}
@keyframes move {
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-put 2s infinite,
move 10s infinite;
}
@keyframes put-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;
}
}大功告成！
相关推荐：
以上是如何使用CSS实现货车loader的效果的详细内容。更多信息请关注PHP中文网其他相关文章！
