css 圆横向动态效果,CSS3 漂亮的圆圆纠缠态LOADING动效

CSS

语言：

CSSSCSS

确定

@-webkit-keyframes rotate-animation {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes rotate-animation {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@-webkit-keyframes move-animation {

0% {

-webkit-transform: translate(0, 0);

transform: translate(0, 0);

}

25% {

-webkit-transform: translate(-64px, 0);

transform: translate(-64px, 0);

}

75% {

-webkit-transform: translate(32px, 0);

transform: translate(32px, 0);

}

100% {

-webkit-transform: translate(0, 0);

transform: translate(0, 0);

}

}

@keyframes move-animation {

0% {

-webkit-transform: translate(0, 0);

transform: translate(0, 0);

}

25% {

-webkit-transform: translate(-64px, 0);

transform: translate(-64px, 0);

}

75% {

-webkit-transform: translate(32px, 0);

transform: translate(32px, 0);

}

100% {

-webkit-transform: translate(0, 0);

transform: translate(0, 0);

}

}

body {

background-color: #F5F5F5;

}

.circle-loader {

display: block;

width: 64px;

height: 64px;

margin-left: -32px;

margin-top: -32px;

position: absolute;

left: 50%;

top: 50%;

-webkit-transform-origin: 16px 16px;

transform-origin: 16px 16px;

-webkit-animation: rotate-animation 5s infinite;

animation: rotate-animation 5s infinite;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

}

.circle-loader .circle {

-webkit-animation: move-animation 2.5s infinite;

animation: move-animation 2.5s infinite;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

position: absolute;

left: 50%;

top: 50%;

}

.circle-loader .circle-line {

width: 64px;

height: 24px;

position: absolute;

top: 4px;

left: 0;

-webkit-transform-origin: 4px 4px;

transform-origin: 4px 4px;

}

.circle-loader .circle-line:nth-child(1) {

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

}

.circle-loader .circle-line:nth-child(2) {

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

.circle-loader .circle-line:nth-child(3) {

-webkit-transform: rotate(270deg);

transform: rotate(270deg);

}

.circle-loader .circle-line:nth-child(4) {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

.circle-loader .circle-line .circle:nth-child(1) {

width: 8px;

height: 8px;

top: 50%;

left: 50%;

margin-top: -4px;

margin-left: -4px;

border-radius: 4px;

-webkit-animation-delay: -0.3s;

animation-delay: -0.3s;

}

.circle-loader .circle-line .circle:nth-child(2) {

width: 16px;

height: 16px;

top: 50%;

left: 50%;

margin-top: -8px;

margin-left: -8px;

border-radius: 8px;

-webkit-animation-delay: -0.6s;

animation-delay: -0.6s;

}

.circle-loader .circle-line .circle:nth-child(3) {

width: 24px;

height: 24px;

top: 50%;

left: 50%;

margin-top: -12px;

margin-left: -12px;

border-radius: 12px;

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s;

}

.circle-loader .circle-blue {

background-color: #1f4e5a;

}

.circle-loader .circle-red {

background-color: #ff5955;

}

.circle-loader .circle-yellow {

background-color: #ffb265;

}

.circle-loader .circle-green {

background-color: #00a691;

}