用CSS3创建旋转载入器

原文地址：http://css-tricks.com/css3-loading-spinner/

原文作者：Chris Coyier

译者：蒋宇捷

 

    为了好玩，我创建了一个小小的CSS3纵向旋转的载入效果。下面是这个光环在Webkit内核浏览器上的效果图片。

工作原理：

• 两个圆形重叠在一起. 其中一个使用伪元素创建。
• 伪元素创建的圆形使用负的z-index放置在下面。
• 伪元素创建的圆形的box-shadow（盒阴影）设置为inset（内阴影）。
• 标准的圆形使用标准的box-shadow（盒阴影）。
• 文字“Loading”使用<strong>标签和overflow:hidden。
• <strong>标签的长度使用keyframe动画重复的展现。
• 设置line-height（行高）等于height（高度）使文本垂直居中。
• 旋转器是一个三角形，设置z-index，使其放置在伪元素创建的圆形上，但是在标准的圆之下。
• 我们将通过改变三角形的-webkit-transform-origin属性使其从顶端开始旋转。
• 我们将使用keyframe动画从0到360度开始重复设置三角形的角度。

    理想情况下，三角形将是一个伪元素，但不幸的是它现在是一个<span>。因为伪元素目前还不能设置动画。Firefox 4可以设置伪元素的转换，但是Firefox 4还不支持keyframe动画。

    点击查看示例。