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中怎么實現圓環旋轉加載動畫就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。