css实现加载旋转 |css3 多个阴影

.load {
border-radius: 50%;
width: 10em;
height: 10em;
border-top: 0.5em solid #3498db;
border-right: 0.5em solid rgba(52,152,219,0.2);
border-bottom: 0.5em solid rgba(52,152,219,0.2);
border-left: 0.5em solid rgba(52,152,219,0.2);
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

上面代码就是实现加载旋转的代码，大家将一个圆形作为加载动画的载体，在其四条边设置边框并设置颜色，但需要注意的是Top边要设置成大家想要的颜色，其它三边需要设置成透明色。接着大家使用CSS的动画技术将其旋转起来，这一段代码中大家设置了动画的名称为spin，并设置旋转2秒，旋转过程中线性变化，无限次循环。

值得提醒大家的是，在使用动画的过程中大家一定要使用transform属性，否则动画不会生效。transform这个属性表示对元素进行变形，其中rotate是其中一个常用的操作方法，可以旋转元素。

好了，这样一个流畅简洁又有趣的加载旋转就完成了。是不是很简单呢？