html css 走马灯,CSS3 跑马灯

CSS

语言：

CSSSCSS

确定

.d1 {

position: absolute;

top: 50%;

left: 50%;

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

animation: rotate 0.8s infinite linear;

border: 50px solid transparent;

border-radius: 50%;

opacity: 0.8;

}

@keyframes rotate {

0% {

border-top: 50px solid #f44336;

border-left: 50px solid transparent;

border-bottom: 50px solid #2196f3;

border-right: 50px solid transparent;

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

}

100% {

border-top: 50px solid transparent;

border-left: 50px solid #f44336;

border-bottom: 50px solid transparent;

border-right: 50px solid #2196f3;

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

}

}

.d2 {

position: absolute;

top: 50%;

left: 50%;

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

animation: rotate2 0.616s infinite linear;

border: 50px solid transparent;

border-radius: 50%;

opacity: 0.8;

}

@keyframes rotate2 {

0% {

border-top: 50px solid #f44336;

border-left: 50px solid transparent;

border-bottom: 50px solid #2196f3;

border-right: 50px solid transparent;

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

}

100% {

border-top: 50px solid transparent;

border-left: 50px solid #f44336;

border-bottom: 50px solid transparent;

border-right: 50px solid #2196f3;

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

}

}

.d3 {

position: absolute;

top: 50%;

left: 50%;

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

animation: rotate3 1.4s infinite linear;

border: 50px solid transparent;

border-radius: 50%;

opacity: 0.8;

}

@keyframes rotate3 {

0% {

border-top: 50px solid #f44336;

border-left: 50px solid transparent;

border-bottom: 50px solid #2196f3;

border-right: 50px solid transparent;

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

}

100% {

border-top: 50px solid transparent;

border-left: 50px solid #f44336;

border-bottom: 50px solid transparent;

border-right: 50px solid #2196f3;

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

}

}