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

40.   

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