CSS实现圆环旋转加载动画

Echo ·
更新时间:2024-11-13
· 856 次阅读

先看看效果图,是不是很炫:

直接上代码:

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

需要 登录 后方可回复, 如果你还没有账号请 注册新账号