纯CSS实现loading跑马灯教程，一步一步教你做

今天手上任务不太多，简单写一个小小的loading效果。

话不多说，直接开始撸代码。

1.先写布局

< div class= "wrapper" >

< div class= "move" ></ div >

< div class= "move" ></ div >

< div class= "move" ></ div >

< div class= "move" ></ div >

</ div >

一个容器，作为4个小方块的父元素。

2.父元素以及小方块的样式

.wrapper {

height: 100px;

width: 100px;

margin: 100px auto;

position: relative;

}

.wrapper .move {

height: 50%;

width: 50%;

position: absolute;

top: 0;

left: 0;

background-color: red;

color: #fff;

text-align: center;

line-height: 50px

}

在这里我用到的是小方块绝对定位，通过top,left值的变化进行移动，当然你也可以用transform。

3.就是如何让小方块动起来了，如果只有一个小方块，很显然他的位置变化是（0,0）、（0,50）、（50,50）、（50,0），那么我们就看一个小方块的动画如何写

@keyframes recolor {

0% {

top: 0;

left: 0;