用html让一条直线旋转,CSS3 旋转的条线球

CSS

语言：

CSSSCSS

确定

html {

width: 100%;

height: 100%;

overflow: hidden;

}

body {

background: linear-gradient(45deg, #444 0%, #010c14 100%);

background-size: 200% 200%;

height: 100%;

width: 100%;

animation: background 6s ease infinite;

}

.circle {

position: absolute;

top: 50%;

left: 50%;

margin-top: -100px;

margin-left: -100px;

width: 200px;

height: 200px;

border: 10px solid #EEE;

border-radius: 50%;

}

.circle-1 {

border-color: #2ecc71;

box-shadow: 0px 0px 2px 0px #2ecc71, inset 0px 0px 2px 0px #2ecc71;

animation: rotate 3s linear infinite 0.5s;

}

.circle-2 {

border-color: #9b59b6;

box-shadow: 0px 0px 2px 0px #9b59b6, inset 0px 0px 2px 0px #9b59b6;

animation: rotate 3s linear infinite 1s;

}

.circle-3 {

border-color: #e74c3c;

box-shadow: 0px 0px 2px 0px #e74c3c, inset 0px 0px 2px 0px #e74c3c;

animation: rotate 3s linear infinite 1.5s;

}

.circle-4 {

border-color: #e67e22;

box-shadow: 0px 0px 2px 0px #e67e22, inset 0px 0px 2px 0px #e67e22;

animation: rotate 3s linear infinite 2s;

}

.circle-5 {

border-color: #f1c40f;

box-shadow: 0px 0px 2px 0px #f1c40f, inset 0px 0px 2px 0px #f1c40f;

animation: rotate 3s linear infinite 2.5s;

}

.circle-6 {

border-color: #bdc3c7;

box-shadow: 0px 0px 2px 0px #bdc3c7, inset 0px 0px 2px 0px #bdc3c7;

animation: rotate 3s linear infinite 3s;

}

@keyframes rotate {

0% {

transform: rotateY(0deg);

}

100% {

transform: rotateY(180deg);

}

}

@keyframes background {

0% {

background-position: 0% 50%;

}

50% {

background-position: 100% 50%;

}

100% {

background-position: 0% 50%;

}

}