css loading 转动,CSS3 扇子旋转LOADING动效

CSS

语言：

CSSSCSS

确定

body {

background: black;

height: 100%;

width: 100%;

position: fixed;

margin: 0;

}

.box1 {

height: 66vh;

width: 66vh;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

.circle {

height: 66vh;

width: 66vh;

background: none;

border-radius: 100%;

position: absolute;

overflow: hidden;

-webkit-animation: rot 4s infinite linear;

opacity: 0.5;

}

.circle2 {

height: 33vh;

width: 33vh;

background: grey;

border-radius: 100%;

position: absolute;

}

.cut {

height: 66vh;

width: 66vh;

background: white;

position: absolute;

}

.a {

top: -25%;

left: -25%;

}

.aa {

top: 50%;

left: 50%;

}

.aaa {

top: -25%;

left: -25%;

}

.b {

top: -25%;

left: 25%;

}

.bb {

top: 50%;

left: -50%;

}

.bbb {

top: -25%;

left: 75%;

}

.c {

top: 25%;

left: -25%;

}

.cc {

top: -50%;

left: 50%;

}

.ccc {

top: 75%;

left: -25%;

}

.d {

top: 25%;

left: 25%;

}

.dd {

top: -50%;

left: -50%;

}

.ddd {

top: 75%;

left: 75%;

}

@-webkit-keyframes rot {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

}