加载动画效果——复杂

前面两篇的动画效果只设计了第一帧和最后一帧，这次，我将学习更加复杂的动画效果

前面代码一样，这里只贴出CSS样式代码：

    .loader {
        font-size: 20px;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        position: relative;
        text-indent: -9999em;
        box-shadow: -3em 2em 0 0.5em #fff, 0 2em 0 0.5em #fff, 3em 2em 0 0.5em #fff;
    }

上面代码中，除了最后一行，其他的我们都很熟悉。他们设置了loader的宽度和高度，圆角弧度和隐藏了文字。下面我们来理解理解 box-shadow 这行代码。
这次 box-shadow 参数写的和我们之前遇到的完全不一样，测试页面，我们会得到三个白点，显然这是这行代码的功劳。
我们先为loader加上红色背景，这样就会出现下面画面。再结合box-shadow这行代码，就很容易理解他的作用：
实际上，三个白点是通过box-shadow生成的三个“阴影”，其颜色为 #fff（白色），且由于自身为圆形，所以阴影也显示为白点。三个原点的排列是由第一、二个参数决定的。其中第一个参数表示横坐标，比如“-3em”表示红点左边3em距离；第二个参数表示纵坐标，3个“2em”保证了他们再同一水平线上。第三个参数表示模糊效果，为0就是没有模糊效果了。第四个参数控制了原点的大小，默认是与loader大小一致，这里设置了 0.5em ，即外扩二分之一字符宽度，是本体的两倍。
看完上述解释，可以自己试一试。

---

利用以上 box-shadow，我们就可以制作出一种流行的loading效果，其内部参数可以根据动画效果改变：

    @keyframes load-effect {
	0% {
		box-shadow: -3em 2em 0 .5em #FFF, 0 2em 0 0 #FFF, 3em 2em 0 -.5em #FFF;
	}
	25% {
		box-shadow: -3em 2em 0 0 #FFF, 0 2em 0 -.5em #FFF, 3em 2em 0 0 #FFF;
	}
	50% {
		box-shadow: -3em 2em 0 -0.5em #FFF, 0 2em 0 0 #FFF, 3em 2em 0 .5em #FFF;
	}
	75% {
		box-shadow: -3em 2em 0 0 #FFF, 0 2em 0 .5em #FFF, 3em 2em 0 0 #FFF;
	}
	100% {
		box-shadow: -3em 2em 0 .5em #FFF, 0 2em 0 0 #FFF, 3em 2em 0 -.5em #FFF;
	}

上面动画只改变了白点的大小，从二倍变为本身大小又缩小二倍由变为本身大小又放大为二倍。白点之间的动画关系可以自行模拟，以便选出最好的。

只需要在所使用的动画的loader对象上添加执行动画的代码即可：

    .loader {
        animation: load-effect 1s infinite linear;
    }