CSS3 加载动画

我做了一个 简单的 CSS3 rotate-y 加载图形 只是为了好玩。这是一个 WebKit 中显示的动画 GIF。

工作原理

• 两个 圆形 叠加在一起。一个由 伪元素 创建。
• 伪圆形位于下方，具有负的 z-index。
• 伪圆形具有 内阴影。
• 普通圆形具有常规的 阴影。
• “加载中…” 是一个 strong 标签，具有 隐藏溢出。
• strong 标签的宽度是 动画关键帧，无限循环显示。
• 文本垂直居中，通过使 line-height 等于 height 来实现。
• 加载动画是一个 三角形，放置在伪圆形上方但普通圆形下方，并使用 z-index 控制层级。
• 通过更改 -webkit-transform-origin 将三角形从其尖端旋转。
• 三角形使用 关键帧动画 从 0 到 360 度无限旋转。

理想情况下，三角形也应该是一个伪元素，但不幸的是，它是一个 <span>。伪元素尚不能被动画化。Firefox 4 可以对其进行过渡，但 Firefox 4 还没有关键帧动画功能。

查看演示