用CSS3创建旋转载入器
2012-09-17 15:28
232 查看
原文地址: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动画。
点击查看示例。
原文作者: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动画。
点击查看示例。
相关文章推荐
- 仅用CSS3创建h5预加载旋转圈
- 使用CSS3创建一个旋转可变色按钮
- 使用CSS3创建一个旋转可变色按钮
- css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
- [css3]圆盘旋转动画
- 创建带有动画的APP 之 高效的显示位图:高效的载入大的位图
- CSS3实现头像旋转
- CSS3实现大小不一的粒子旋转加载动画
- 创建图片内存副本和旋转,缩放,平移,镜面,倒影
- css3围绕圆形旋转思路
- CSS3 transform实现图片旋转木马3D浏览效果
- css3 3D旋转特效
- [HTML5-SVG]使用svg、CSS3、raphaeljs:模拟月球绕地球,地球绕太阳旋转
- css3的动画特效--元素旋转(transition,animation)
- 纯css3 360旋转代码
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- 前端开发推荐-创建CSS3漂亮的动画菜单
- CSS3 transform rotate(旋转)锯齿的解决办法
- Cocos2dx 3.1.1 学习笔记整理(2):创建场景与载入图片
- CSS3让登陆面板3D旋转起来