css加载动画圆,CSS3 单DIV元素的圆形加载动画

CSS

语言：

CSSSCSS

确定

html {

overflow: hidden;

background: #222;

}

.loader {

box-shadow: 13.85819em 5.74025em, 11.9003em 9.13142em, 9.13142em 11.9003em, 5.74025em 13.85819em, 1.95789em 14.87167em, -1.95789em 14.87167em, -5.74025em 13.85819em, -9.13142em 11.9003em, -11.9003em 9.13142em, -13.85819em 5.74025em, -14.87167em 1.95789em, -14.87167em -1.95789em, -13.85819em -5.74025em, -11.9003em -9.13142em, -9.13142em -11.9003em, -5.74025em -13.85819em, -1.95789em -14.87167em, 1.95789em -14.87167em, 5.74025em -13.85819em, 9.13142em -11.9003em, 11.9003em -9.13142em, 13.85819em -5.74025em;

animation: rot 6s steps(12) infinite;

}

.loader,

.loader:before,

.loader:after {

position: absolute;

top: 50%;

left: 50%;

width: 1.5em;

height: 1.5em;

border-radius: 50%;

color: #ccc;

}

.loader:before,

.loader:after {

margin: -0.75em calc(14.87167em - 0.75em);

background-color: currentColor;

animation: rot-b 0.5s ease-in-out infinite alternate, bg 0.25s ease infinite alternate;

content: '';

}

.loader:after {

animation-name: rot-a, bg;

}

@keyframes rot {

to {

transform: rotate(360deg);

}

}

@keyframes rot-b {

from {

transform: rotate(-180deg) translateY(1.95789em);

}

to {

transform: rotate(0deg) translateY(1.95789em);

}

}

@keyframes rot-a {

from {

transform: rotate(0deg) translateY(1.95789em);

}

to {

transform: rotate(180deg) translateY(1.95789em);

}

}

@keyframes bg {

to {

background-color: #800;

}

}