用css3制作旋转加载动画

手册/FAQ (459) 2016-04-09 10:41:15

用css3制作旋转加载动画

以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android。最近在开发一个移动平台的web app,那么就有机会利用css3去实现一些很酷的效果,这些效果原来更多的是利用图片来实现。最近的一个改进就是利用css3制作旋转加载动画。以下将分别介绍2种实现的方案。

方案1,图片辅助

传统做法是直接用动态的GIF图片,这个方案是用PNG图片加上背景颜色来模拟静止的加载图片,然后利用css中的animation处理图片的旋转。相比传统方案,这个方案的好处是可以直接通过修改CSS来改变背景色,可以修改大小和旋转速度。如下是具体的CSS代码:

[html] view plain copy

1.  @-webkit-keyframes rotate {  

  1.   from {-webkit-transform:rotate(0deg);}  

3.    to {-webkit-transform:rotate(360deg);}  

  1. }  

5.  p#spinner {  

  1.   height: 30px;  

7.    width: 30px;  

  1.   overflow: hidden;  

9.    background: #000;  

  1.   -webkit-mask-image: url("data:image/png[...]");  

11.   -webkit-mask-size: 30px 30px;  

  1.   -webkit-animation-name: rotate;  

13.   -webkit-animation-duration: 1.5s;  

  1.   -webkit-animation-iteration-count: infinite;  

15.   -webkit-animation-timing-function: linear;  

  1. }  

 

这个方案,只有safari可以很好地支持。chrome下支持不是很好,所以这是一个不太成熟的方案。

方案2 CSS实现

方案的思路是,首先用css渲染12个静态的bar,每个bar间隔30度的角度,给每个bar添加背景变淡的动画,但是相邻bar的动画效果延迟1/12秒,来保证12个bar是按顺序变亮然后变暗。从而模拟出旋转的效果。

这个旋转效果是伪旋转,所有的bar都没有真正做到旋转。

1.  @-webkit-keyframes fade {  

  1.     from {opacity: 1;}  

3.      to {opacity: 0.25;}  

  1. }  

5.  div.spinner {  

  1.     position: relative;  

7.      width: 30px;  

  1.     height: 30px;  

9.      display: inline-block;  

  1. }  

11. div.spinner div {  

  1.     width: 20%;  

13.     height: 40%;  

  1.     background: #000;  

15.     position: absolute;  

  1.     left: 100%;  

17.     top: 100%;  

  1.     opacity: 0;  

19.     -webkit-animation: fade 1s linear infinite;  

  1.     -webkit-border-radius: 30px;  

21. }  

  1. div.spinner div.bar1 {  

23.     -webkit-transform:rotate(0deg) translate(0, -142%);  

  1.         -webkit-animation-delay: 0s;  

25. }  

  1. [......]  

27. div.spinner div.bar12 {  

  1.     -webkit-transform:rotate(330deg) translate(0, -142%);   

29.     -webkit-animation-delay: -0.0833s;  

  1. }  

 

THE END