css实现三个点加载中的效果

效果：

//html部分：
<span class="loading">正在加载中<dot>...</dot> </span>

//css：
 		.loading{
            display: flex;/*让dot和文字在同一行*/
        }
        dot{
        	/*让点垂直居中*/
            height: 1em;
            line-height: 1;
            /*让点垂直排列*/
            display: flex;
            flex-direction: column;
            /*溢出部分的点隐藏*/
            overflow: hidden;
        }
        dot::before{
        	/*三行三种点，需要搭配white-space:pre使用才能识别\A字符*/
            content: '...\A..\A.';
            white-space: pre-wrap;
            animation: dot 3s infinite step-end;/*step-end确保一次动画结束后直接跳到下一帧而没有过渡*/
        }
        @keyframes dot{
            33% {transform: translateY(-2em);}
            66% {transform: translateY(-1em);}
        }

基本原理是通过三行三种点垂直方向上分别移动到可视区域实现的，其中

1. 使用::before的原因是为了让三行点能够将dot元素中本身的…顶到最下面，这样在Chrome浏览器中就一直都不会看到它
2. 使用dot元素的原因是这个元素在低版本浏览器中不兼容，这样就会直接显示dot标签中的内容：三个点
3. ::before中的content中先写…的原因是IE9浏览器不支持animation属性，先写三个点就可以静态的显示三个点

参考《CSS世界》——张鑫旭