JAVA黑白圆圈图形_CSS3 黑白交替旋转圆圈

CSS

语言：

CSSSCSS

确定

body {

background-color: #55cc55;

overflow: hidden;

}

.ring {

display: none;

position: absolute;

top: 50%;

left: 50%;

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

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

-webkit-transform-origin: center;

transform-origin: center;

border-top: solid 10px black;

border-bottom: solid 10px white;

border-left: none;

border-right: none;

border-radius: 50%;

box-sizing: border-box;

-webkit-animation: anim 20s infinite linear;

animation: anim 20s infinite linear;

}

.ring:nth-child(1) {

display: block;

width: 40px;

height: 40px;

-webkit-animation-duration: 20s;

animation-duration: 20s;

}

.ring:nth-child(2) {

display: block;

width: 80px;

height: 80px;

-webkit-animation-duration: 10s;

animation-duration: 10s;

}

.ring:nth-child(3) {

display: block;

width: 120px;

height: 120px;

-webkit-animation-duration: 6.66667s;

animation-duration: 6.66667s;

}

.ring:nth-child(4) {

display: block;

width: 160px;

height: 160px;

-webkit-animation-duration: 5s;

animation-duration: 5s;

}

.ring:nth-child(5) {

display: block;

width: 200px;

height: 200px;

-webkit-animation-duration: 4s;

animation-duration: 4s;

}

.ring:nth-child(6) {

display: block;

width: 240px;

height: 240px;

-webkit-animation-duration: 3.33333s;

animation-duration: 3.33333s;

}

.ring:nth-child(7) {

display: block;

width: 280px;

height: 280px;

-webkit-animation-duration: 2.85714s;

animation-duration: 2.85714s;

}

.ring:nth-child(8) {

display: block;

width: 320px;

height: 320px;

-webkit-animation-duration: 2.5s;

animation-duration: 2.5s;

}

.ring:nth-child(9) {

display: block;

width: 360px;

height: 360px;

-webkit-animation-duration: 2.22222s;

animation-duration: 2.22222s;

}

.ring:nth-child(10) {

display: block;

width: 400px;

height: 400px;

-webkit-animation-duration: 2s;

animation-duration: 2s;

}

@-webkit-keyframes anim {

0% {

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

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

}

100% {

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

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

}

}

@keyframes anim {

0% {

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

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

}

100% {

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

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

}

}