HardBirch

用CSS3创建旋转载入器

时间:11-02-19 栏目:HTML5移动开发 作者:张飞不张,文采横飞 评论:0 点击: 1,214 次

原文地址: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动画从0360度开始重复设置三角形的角度。

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

    点击查看示例

 

声明: 本文由( 张飞不张,文采横飞 )原创编译,转载请保留链接: 用CSS3创建旋转载入器

用CSS3创建旋转载入器:等您坐沙发呢!

发表评论


QQ群互动

Linux系统与内核学习群:194051772

WP建站技术学习交流群:194062106

魔豆之路QR

魔豆的Linux内核之路

魔豆的Linux内核之路

优秀工程师当看优秀书籍

优秀程序员,要看优秀书!

赞助商广告

友荐云推荐