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

直接上代码：

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;      }      #loader8,      #loader8: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圆环旋转加载动画有所启发。

CSS实现圆环旋转加载动画