代码解读

 

　　定义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;

 

　　}

 

　　}







本文转载自中文网