用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动画。
posted on 2011-02-19 23:29 android开发实例 阅读(110) 评论(0) 编辑 收藏 举报