css实现打点动画

写loading时有时需要在后面连续的出现一个点、两个点、三个点，实现方式有很多种，js、css皆有，今天分享看到的一种css实现方式。效果如下

代码如下：

            .btn {
                padding: 4px 12px;
                border: 1px solid #ff4d4f;
                background-color: #ff4d4f;
                border-radius: 2px;
                color: #ffffff;
                font-size: 14px;
            }
            .dot {
               display: inline-block;
               height: 1em;
               line-height: 1;
               overflow: hidden;
               vertical-align: -.25ex;
            }
            .dot::after {
                display: block;
                content: '...\A..\A.';
                white-space: pre-wrap;
                animation: dotframes 3s infinite step-start both;
            }
            @keyframes dotframes {
                33% {
                    transform: translateY(-2em);
                }
                66% {
                    transform: translateY(-1em);
                }
            }

说明：

• ex: 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)

• \A: 换行符

• white-space： pre-wrap，空白符会被保留，直到遇到换行符

html：

 <button class="btn">
     加载中
     <span class="dot"></span>
</button>

PS: 用mac自带的录屏软件录制后转为gif后动画变慢了^_