CSS怎么实现货车loader的效果 - web开发

这篇“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;

　　}

　　}

css的三种引入方式

1.行内样式，最直接最简单的一种，直接对HTML标签使用style=""。2.内嵌样式，就是将CSS代码写在之间，并且用

进行声明。3.外部样式，其中链接样式是使用频率最高，最实用的样式，只需要在之间加上

就可以了。其次就是导入样式，导入样式和链接样式比较相似，采用@import样式导入CSS样式表，不建议使用。

感谢您的阅读，希望您对“CSS怎么实现货车loader的效果”这一关键问题有了一定的理解，具体使用情况还需要大家自己动手实验使用过才能领会，快去试试吧，如果想阅读更多相关知识点的文章，欢迎关注云行业资讯频道！