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

直接上代码：

CSS Code复制内容到剪贴板 #loader8{ margin:30px50px; float:left; font-size:10px; position:relative; text-indent:-9999em; border-top:1.1emsolidrgba(255,128,0,0.2); border-right:1.1emsolidrgba(255,128,0,0.2); border-bottom:1.1emsolidrgba(255,128,0,0.2); border-left:1.1emsolidrgba(255,128,0,1); -webkit-animation:load81.1sinfinitelinear; animation:load81.1sinfinitelinear; } #loader8, #loader8:after{ border-radius:50%; width:10em; height:10em; } @-webkit-keyframesload8{ 0%{ -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100%{ -webkit-transform:rotate(360deg); transform:rotate(360deg); } } @keyframesload8{ 0%{ -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100%{ -webkit-transform:rotate(360deg); transform:rotate(360deg); } }

以上就是本文的全部内容，希望对大家学习实现CSS圆环旋转加载动画有所启发。