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後動畫變慢了^_