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

直接上代码：

CSS Code 复制内容到剪贴板 #loader8 {         margin :  30px   50px ;         float :  left ;         font-size :  10px ;         position :  relative ;         text-indent : -9999em;         border-top : 1.1em  solid  rgba(255, 128, 0, 0.2);         border-right : 1.1em  solid  rgba(255, 128, 0, 0.2);         border-bottom : 1.1em  solid  rgba(255, 128, 0, 0.2);         border-left : 1.1em  solid  rgba(255, 128, 0, 1);        -webkit-animation: load8 1.1s infinite linear;        animation: load8 1.1s infinite linear;      }      #loader 8,      #loader 8: after {         border -radius: 50%;         width : 10em;         height : 10em;      }      @-webkit-keyframes load8 {        0% {          -webkit-transform: rotate(0deg);          transform: rotate(0deg);        }        100% {          -webkit-transform: rotate(360deg);          transform: rotate(360deg);        }      }      @keyframes load8 {        0% {          -webkit-transform: rotate(0deg);          transform: rotate(0deg);        }        100% {          -webkit-transform: rotate(360deg);          transform: rotate(360deg);        }      }        

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