CSS实现圆环旋转加载动画

ttx9n

这篇文章主要介绍了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圆环旋转加载动画有所启发。

lsc54

呵呵呵呵呵呵呵a

qq303604905

谢谢分享，先下来用用

.l4

这个源码还可以

plvo189

感谢楼主分享

hd1tvqb3

刷屏刷屏刷屏

ppwxcg

啦啦啦啦啦啦啦啦！

qzdhcgs

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

kwzc65wdj

激动人心，无法言表！

gyalp

好人好人好人好人