加载动画模版：跳动的点

效果展示

<div class="container">
  <div class="dot"></div>
</div>

.container {
  position: relative;
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.dot:before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  background-color: #333;
  animation: dot 0.5s ease infinite alternate;
}
@keyframes dot {
  0% {
    top: 60px;
    height: 5px;
    border-radius: 50px 50px 25px 25px;
    transform: scaleX(1.5);
  }
  50% {
    height: 20px;
    border-radius: 50%;
    transform: scaleX(1);
  }
  100% {
    top: 0;
  }
}
.dot:after {
  content: "";
  width: 20px;
  height: 4px;
  border-radius: 50%;
  position: absolute;
  top: 62px;
  animation: shadow 0.5s ease infinite alternate;
}
@keyframes shadow {
  0% {
    filter: blur(1px);
    transform: scaleX(1.5);
    background-color: rgba(0, 0, 0, 0.9);
  }
  50% {
    transform: scaleX(1);
    background-color: rgba(0, 0, 0, 0.6);
  }
  100% {
    filter: blur(2px);
    transform: scaleX(0.5);
    background-color: rgba(0, 0, 0, 0.3);
  }
}

代码解析

HTML 结构

这个跳动点动画的 HTML 结构非常简洁，主要包含两层：

• 最外层的 container div 用于居中显示动画元素
• 内部的 dot div 作为动画的主体元素，通过 CSS 的 ::before 和 ::after 伪元素分别实现点和其阴影的效果

通过这种简洁的结构，我们仅用少量 HTML 代码就实现了复杂的动画效果。

CSS 动画原理

这个动画效果主要依靠 CSS 的 animation 属性和 @keyframes 规则实现，通过精心设计的动画帧，模拟了球体跳动时的物理特性：

1. 点的动画 (dot 关键帧)：

   • 0% 帧：点位于底部，形状被压扁（高度变小，宽度变大），模拟球体落地时的形变
   • 50% 帧：点恢复为标准圆形，处于跳跃的中间状态
   • 100% 帧：点跳到顶部，保持圆形形状
   • 使用 infinite alternate 使动画无限循环并来回播放

2. 阴影的动画 (shadow 关键帧)：

   • 0% 帧：阴影较大且颜色较深，位于点的正下方，模拟球体落地时的阴影效果
   • 50% 帧：阴影大小适中，颜色适中，跟随点移动
   • 100% 帧：阴影变小且颜色较浅，模拟球体跳跃到高处时的阴影效果
   • 使用 blur 滤镜增强阴影的真实感

3. 同步机制：

   • 点和阴影的动画使用相同的持续时间 (0.5s) 和缓动函数 (ease)
   • 确保阴影始终与点的位置和状态保持同步，增强整体动画的协调感

使用方法

1. 复制 HTML 结构：将 HTML 代码块中的容器和点元素复制到你的网页中。
2. 添加 CSS 样式：将 CSS 代码块中的样式规则复制到你的样式表中。
3. 调整点的大小：可以修改 .dot:before 中的 width 和 height 属性来调整点的大小。
4. 自定义点的颜色：可以修改 .dot:before 中的 background-color 属性来更改点的颜色。
5. 调整动画速度：可以修改两个 animation 属性中的时间值（当前为 0.5s）来调整动画速度。
6. 调整容器高度：可以调整 .container 的 height 属性，以改变点的跳跃高度。
7. 自定义阴影效果：可以修改 .dot:after 中的样式属性来调整阴影效果。

## 浏览器兼容性

::: info

- 表格中的数字表示该浏览器开始支持的最低版本
- "No" 表示该浏览器不支持此功能

:::

### PC 端

| 浏览器功能 | Chrome | Edge | Firefox | Opera | Safari |
| ---------- | :----: | :--: | :-----: | :---: | :----: |
| filter 属性 |   18    |  12  |   35    |  15   |   6    |

### 移动端

| 浏览器功能 | Chrome Android | Firefox Android | Opera Android | Safari iOS | WebView Android |
| ---------- | :------------: | :-------------: | :-----------: | :--------: | :-------------: |
| filter 属性 |       53       |       50        |      40       |    9.3    |       53        |

### 注意事项

1. **IE 浏览器兼容性**：IE 11 及以下版本对部分 CSS 特性支持不完全，`filter` 属性在 IE 11 中不被支持
2. **性能优化**：可以通过调整动画的持续时间和缓动函数来改变动画的节奏和感觉，同时注意性能影响