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

直接上代码：

1. #loader8{
2. margin:30px50px;
3. float:left;
4. font-size:10px;
5. position:relative;
6. text-indent:-9999em;
7. border-top:1.1emsolidrgba(255,128,0,0.2);
8. border-right:1.1emsolidrgba(255,128,0,0.2);
9. border-bottom:1.1emsolidrgba(255,128,0,0.2);
10. border-left:1.1emsolidrgba(255,128,0,1);
11. -webkit-animation:load81.1sinfinitelinear;
12. animation:load81.1sinfinitelinear;
13. }
14. #loader8,
15. #loader8:after{
16. border-radius:50%;
17. width:10em;
18. height:10em;
19. }
20. @-webkit-keyframesload8{
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. @keyframesload8{
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圆环旋转加载动画有所启发。