验证中...
Languages: CSS
Categories: CSS 技巧
Latest update 2019-05-09 21:17
gistfile1.txt
Raw Copy
// 通过修改color值改变loading的颜色
.loading {
position: relative;
width: 60px;
height: 60px;
color: #188eee;
border-radius: 50%;
transform: rotate(360deg);
animation: loadingRotate 4s infinite linear;
}
.loading::before {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
border-radius: 50%;
border-top: 3px solid;
border-left: 3px solid;
border-bottom: 3px solid transparent;
border-right: 3px solid transparent;
transform: rotate(720deg);
animation: loadingRotate 2.5s infinite ease-out;
}
.loading::after {
position: absolute;
content: "";
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
box-sizing: border-box;
border-radius: 50%;
border-bottom: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #fff;
border-left: 7px solid #fff;
transform: rotate(720deg);
animation: loadingRotate 2.5s infinite ease-in-out;
}
@keyframes loadingRotate {
100% {
transform: rotate(0);
}
}
QQ20190509-211716.gif

Comment list( 0 )

You need to Sign in for post a comment

Help Search

Gitee_sixth 5th_float_left_close