纯CSS3方块球跳动加载动画

纯 CSS3 的方块球跳动加载动画，创意挺新，结构也清爽。它不是用 JS 堆出来的花架子，而是纯靠 CSS 搞定动效，挺适合轻量项目。动画节奏自然，几个小方块轮着跳，看着像一群球在点地，还挺有意思的。

纯CSS3的方块球跳动加载动画，动效流畅，布局干净。没有一行 JS，全靠@keyframes和transform撑起来，性能还不错，适合等接口数据时塞一下。

动画部分比较简单，核心就一个@keyframes，比如下面这样：

@keyframes ball-bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

每个方块可以设个不同的animation-delay，跳得错落一点，更有节奏感。用display: flex来排一排，居中、居底都方便。

你想搞得更花点，也能加上rotateY或者translateZ，弄出点翻转或者深度的感觉。配点transition做过渡，效果更柔和。

实际场景像是做加载页、表单提交中、异步加载列表时用的挺多，既不重也不丑。你要想直接试试，压缩包texiao4490_1560680961里有完整代码。

如果你对这种纯 CSS 动画感兴趣，还可以看看这些相关资源：

• 创意方块跳动 CSS3 加载动画.zip
• css3 心跳动画流行划过效果跳动的球 css3.zip
• css3 弹力球动画 animation 属性制作 3D 弹力球弹跳动画效果
• Css3 动画效果

嗯，这个动画轻量、兼容性也还不错，调色也容易。如果你在找个不那么死板的加载动效，用它试试蛮合适的。