如何使用CSS实现货车loader的效果

来源：懂视网责编：小采时间：2020-11-27 18:47:39

如何使用CSS实现货车loader的效果

如何使用CSS实现货车loader的效果:本篇文章给大家带来的内容是关于如何使用CSS实现货车loader的效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。效果预览代码解读定义 dom，容器代表卡车，包含的 2 个子元素代表车头和尾气；<hr> 代表道路：<div cl

推荐度：

点击下载本文 文档为doc格式

导读如何使用CSS实现货车loader的效果:本篇文章给大家带来的内容是关于如何使用CSS实现货车loader的效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。效果预览代码解读定义 dom，容器代表卡车，包含的 2 个子元素代表车头和尾气；<hr> 代表道路：<div cl

本篇文章给大家带来的内容是关于如何使用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的效果

推荐度：

点击下载本文 文档为doc格式

标签：如何用使用实现

热门焦点

如何使用CSS实现货车loader的效果

如何使用CSS实现货车loader的效果

如何使用CSS实现货车loader的效果

最新推荐

猜你喜欢

热门推荐