本篇文章给大家带来的内容是关于如何使用css实现货车loader的效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
效果预览
代码解读
定义 dom，容器代表卡车，包含的 2 个子元素代表车头和尾气；
代表道路：
立即学习“前端免费学习笔记（深入）”；
居中显示，同时道路与页面之间留出空间：
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实现一个微笑打坐的小和尚
如何使用CSS 和D3实现摆线摇摆的效果动画
以上就是如何使用CSS实现货车loader的效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1611141.html
微信扫一扫 
支付宝扫一扫 
