CSS 小技巧 —— CSS 實現 ... 的 loading 加載中動畫

1. 前言

需求中想做出個這種效果，這個頁面又是一個單獨的 html 頁面，沒必要再單獨引入其他模塊了

就想着用 CSS 動畫來實現

2. 實現效果

3. 實現思路

3.1. 項目要求

1. ... 不能使所在的 dom 元素寬度變化，不然加個 . 變寬，少個點變窄，不好看
2. 需要使用 animation 動畫的 infinite 才行，因為我們需要一直動，直到加載完成
3. 可以不限於三個點，五個點或者多個都得能支持
4. 最好不佔文檔流

3.2. 實現思路

1. 新建 dom 元素，... 都放在此 dom 中，不設置寬度，只設置高度
2. 使用 keyframes 創建動畫，如果 3 個點，就 0%、50%、100%，四個點就 0%、33%、66%、100%
3. 使用 after 偽元素，在 after 上設置 animation 屬性
4. 通過設置 animation 時間進行快慢控制
5. 可以通過設置 left、top 屬性進行位置調整

4. CSS 代碼

.lucky-dots {
  font-size: 24px;
  height: 24px;
  position: relative;
}

@keyframes dot-blink {
  0% {
    content: '.';
  }
  50% {
    content: '..';
  }
  100% {
    content: '...';
  }
}

.lucky-dots::after {
  content: '';
  animation: dot-blink 3s linear infinite;
  position: absolute;
  top: -3px;
  left: 3px;
}

5. 碼上掘金

線上代碼地址：https://code.juejin.cn/pen/7413666201529745408

效果圖