怎么使用CSS实现货车loader的效果
小编给大家分享一下怎么使用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实现货车loader的效果的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
当前文章:怎么使用CSS实现货车loader的效果
分享网址:http://hbruida.cn/article/jeigie.html