css3中圆性渐变,CSS3 方和圆的交替渐变动画

CSS

语言：

CSSSCSS

确定

.circle {

position: fixed;

top: 50%;

left: 50%;

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

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

-webkit-transform-origin: 0% 0%;

transform-origin: 0% 0%;

border: 2px solid black;

-webkit-animation: animRadius 1000ms ease infinite alternate, animRotate 8000ms linear infinite;

animation: animRadius 1000ms ease infinite alternate, animRotate 8000ms linear infinite;

}

.circle:nth-of-type(1) {

width: 50px;

height: 50px;

-webkit-animation-delay: -200ms;

animation-delay: -200ms;

}

.circle:nth-of-type(2) {

width: 100px;

height: 100px;

-webkit-animation-delay: -400ms;

animation-delay: -400ms;

}

.circle:nth-of-type(3) {

width: 150px;

height: 150px;

-webkit-animation-delay: -600ms;

animation-delay: -600ms;

}

.circle:nth-of-type(4) {

width: 200px;

height: 200px;

-webkit-animation-delay: -800ms;

animation-delay: -800ms;

}

@-webkit-keyframes animRadius {

0% {

border-radius: 0%;

}

100% {

border-radius: 50%;

}

}

@keyframes animRadius {

0% {

border-radius: 0%;

}

100% {

border-radius: 50%;

}

}

@-webkit-keyframes animRotate {

0% {

-webkit-transform: rotate(0deg) translate(-50%, -50%);

transform: rotate(0deg) translate(-50%, -50%);

}

100% {

-webkit-transform: rotate(360deg) translate(-50%, -50%);

transform: rotate(360deg) translate(-50%, -50%);

}

}

@keyframes animRotate {

0% {

-webkit-transform: rotate(0deg) translate(-50%, -50%);

transform: rotate(0deg) translate(-50%, -50%);

}

100% {

-webkit-transform: rotate(360deg) translate(-50%, -50%);

transform: rotate(360deg) translate(-50%, -50%);

}

}