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%);
}
}