牛骨文教育服务平台(让学习变的简单)

用CSS3创建旋转载入器

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

原文作者:Chris Coyier

译者:蒋宇捷

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

工作原理:

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

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

 点击查看示例