用CSS3创建旋转载入器

原文地址：[http://css-tricks.com/css3-loading-spinner/](http://css-tricks.com/css3-loading-spinner/) 原文作者：**Chris Coyier** **译者：蒋宇捷**  为了好玩，我创建了一个小小的CSS3纵向旋转的载入效果。下面是这个光环在Webkit内核浏览器上的效果图片。  工作原理： - 两个[圆形](http://css-tricks.com/examples/ShapesOfCSS/)重叠在一起. 其中一个使用[伪元素](http://css-tricks.com/video-screencasts/94-intro-to-pseudo-elements/)创建。 - 伪元素创建的圆形使用负的[z-index](http://css-tricks.com/video-screencasts/40-how-z-index-works/)放置在下面。 - 伪元素创建的圆形的[box-shadow](http://css-tricks.com/snippets/css/css-box-shadow/)（盒阴影）设置为inset（内阴影）。 - 标准的圆形使用标准的[box-shadow](http://css-tricks.com/snippets/css/css-box-shadow/)（盒阴影）。 - 文字“Loading”使用标签和[overflow:hidden](http://css-tricks.com/the-css-overflow-property/)。 - 标签的长度使用[keyframe](http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/)动画重复的展现。 - 设置line-height（行高）等于height（高度）使文本垂直居中。 - 旋转器是一个三角形，设置[z-index](http://css-tricks.com/snippets/css/css-triangle/)，使其放置在伪元素创建的圆形上，但是在标准的圆之下。 - 我们将通过改变三角形的-webkit-transform-origin属性使其从顶端开始旋转。 - 我们将使用keyframe动画从0到360度开始重复设置三角形的角度。  理想情况下，三角形将是一个伪元素，但不幸的是它现在是一个。因为伪元素目前还不能设置动画。Firefox 4可以设置伪元素的转换，但是Firefox 4还不支持keyframe动画。  [点击查看示例](http://css-tricks.com/examples/Loading/)。