CSS 小技巧 —— CSS 实现 ... 的 loading 加载中动画

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

效果图