CSS实现圆环旋转加载动画

CSS实现圆环旋转加载动画

先看看效果图，是不是很炫：

直接上代码：

CSS Code复制内容到剪贴板

1. #loader8 {     
2.   margin: 30px 50px;     
3.   float: left;     
4.   font-size: 10px;     
5.   position: relative;     
6.   text-indent: -9999em;     
7.   border-top: 1.1em solid rgba(255, 128, 0, 0.2);     
8.   border-right: 1.1em solid rgba(255, 128, 0, 0.2);     
9.   border-bottom: 1.1em solid rgba(255, 128, 0, 0.2);     
10.   border-left: 1.1em solid rgba(255, 128, 0, 1);     
11.   -webkit-animation: load8 1.1s infinite linear;     
12.   animation: load8 1.1s infinite linear;     
13. }     
14. #loader8,     
15. #loader8:after {     
16.   border-radius: 50%;     
17.   width: 10em;     
18.   height: 10em;     
19. }     
20. @-webkit-keyframes load8 {     
21.   0% {     
22.     -webkit-transform: rotate(0deg);     
23.     transform: rotate(0deg);     
24.   }     
25.   100% {     
26.     -webkit-transform: rotate(360deg);     
27.     transform: rotate(360deg);     
28.   }     
29. }     
30. @keyframes load8 {     
31.   0% {     
32.     -webkit-transform: rotate(0deg);     
33.     transform: rotate(0deg);     
34.   }     
35.   100% {     
36.     -webkit-transform: rotate(360deg);     
37.     transform: rotate(360deg);     
38.   }     
39. }     
40.   

以上就是本文的全部内容，希望对大家学习实现CSS圆环旋转加载动画有所启发。