CSS实现圆环旋转加载动画

2024-07-11 08:33:08

字体：大中小

来源：转载

供稿：网友

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

直接上代码：

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); }
}