CSS中怎么实现圆环旋转加载动画-创新互联

这篇文章给大家介绍CSS中怎么实现圆环旋转加载动画，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

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. }  

关于CSS中怎么实现圆环旋转加载动画就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。