先上代码：
dot {display: inline-block;height: 1em;line-height: 1;text-align: left;vertical-align: -.25em;overflow: hidden;}dot::before{display: block;content: '...\A..\A.';white-space: pre-wrap;animation: dot 3s infinite step-start both;}@keyframes dot {33% {transform: translateY(-2em);}
正在加载中<dot>...</dot>
效果：
IE6至IE9浏览器下是静态的点点点，支持animation动画的浏览器下全部都是打点loading动画效果，颜色大小可控，使用非常方便。
原理：
3 行内容，分别是3 个点、2 个点和1个点，然后通过transform控制垂直位置，依次展示每一行的内容。
细节疑问：
（1）为什么使用
<dot>这个元素？（2）为什么使用
::before，可不可以使用::after？（3）从
content属性值来看，是3 个点在第1 行，而1 个点反而在最后一行，为什么这 么处理？（4）这里
white-space值为何使用的是pre-wrap而不是pre？
这4 个问题的答案分别如下:
（1）<dot>是自定义的一个标签元素，除了简约、语义化明显外，更重要的是方便向下兼容，IE8等低版本浏览器不认识自定义的HTML标签，因此，会乖乖地显示里面默认的3 个点，对我们的CSS代码完全忽略。
（2）伪元素使用::before同时display设置为block，是为了在高版本浏览器下原来的3 个点推到最下面，不会影响content的3 行内容显示，如果使用::after怕是效果就很难实现了。
（3）3 个点在第一行的目的在于兼容IE9浏览器，因为IE9浏览器认识<dot>以及::before，但是不支持CSS新世界的animation属性，所以，为了IE9 也能正常显示静态的3 个点，故而把3 个点放在第一行。
（4）这里的white-space:pre-wrap改成white-space:pre效果其实是一样的，之所以使用pre-wrap作为值完全是心情使然。
TIPS:
1. '\A’
还有最后几个小技巧，首先，'\A'是不区分大小写的；其次，'\D'也能实现换行效果，但是，要想上下行对齐，需要用在::before伪元素上，因为CR是将光标移动到当前行的开头，而LF是将光标“垂直”移动到下一行。
'\A'其实指的是换行符中的LF字符，其Unicode编码是000A，在CSS的content属性中则直接写作'\A'；换行符除了LF字符还有CR字符，其Unicode编码是000D，在CSS的content属性中则直接写作'\D'。CR字符和LF字符分别指回车（CR）和换行（LF），content字符生成强大之处就在于不仅普通字符随便插，Unicode字符也不在话下。
2. white-space
white-space指定元素内的空白怎样处理
3. animation-timing-function
animation-timing-function规定动画的速度曲线
除了ease，linear、cubic-bezier之类的过渡函数都会为其插入补间, 动画效果是连贯性的。但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式
4. 理解steps
steps函数指定了一个阶跃函数
第一个参数指定了时间函数中的间隔数量（必须是正整数）
第二个参数可选，接受start和end两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。
step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；
step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。
参考：CSS世界
