实现原理
插入3行内容，分别是3个点、2个点和1个点，然后通过transform控制垂直位置，依次展示每一行的内容。
完整范例代码
<template> <div style="text-align: center;padding-top: 100px"> 正在加载中 <dot>...</dot> </div> </template> <style scoped> 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); } 66% { transform: translateY(-1em); } } </style>
更多解析
- dot是自定义的一个标签元素，除了简约、语义化明显外，更重要的是方便向下兼容，IE8等低版本浏览器不认识自定义的HTML标签，因此，会乖乖地显示里面默认的3个点，对我们的CSS代码完全忽略。
- 伪元素使用::before同时display设置为block，是为了在高版本浏览器下原来的3个点推到最下面，不会影响content的3行内容显示，如果使用::after怕是效果就很难实现
- 3个点在第一行的目的在于兼容IE9浏览器，因为IE9浏览器认识dot以及::before，但是不支持CSS新世界的animation属性，所以，为了IE9也能正常显示静态的3个点，故而把3个点放在第一行。
- '\A'是换行符中的LF字符，其Unicode编码是000A，在CSS的content属性中则直接写作'\A'；换行符除了LF字符还有CR字符，其Unicode编码是000D，在CSS的content属性中则直接写作'\D'。CR字符和LF字符分别指回车（CR）和换行（LF）
