HTML怎么变彩色,CSS3 彩色八卦变换

CSS

语言：

CSSSCSS

确定

body {

height: 100vh;

width: 100vw;

overflow: hidden;

position: relative;

left: 50vw;

top: 50vh;

margin-top: -6.75vh;

background: black;

}

body .notch {

position: relative;

box-sizing: border-box;

border-radius: 50%;

-webkit-animation: thing 1.5s ease-in-out infinite alternate;

animation: thing 1.5s ease-in-out infinite alternate;

}

body .notch:nth-of-type(1) {

border: 2vh inset #ff3900;

height: 1vh;

width: 1vh;

top: -0.5vh;

left: -0.5vh;

-webkit-animation-delay: 0.05556s;

animation-delay: 0.05556s;

}

body .notch:nth-of-type(2) {

border: 2vh inset #ff7100;

height: 2vh;

width: 2vh;

top: -2vh;

left: -1vh;

-webkit-animation-delay: 0.11111s;

animation-delay: 0.11111s;

}

body .notch:nth-of-type(3) {

border: 2vh inset #fa0;

height: 3vh;

width: 3vh;

top: -4.5vh;

left: -1.5vh;

-webkit-animation-delay: 0.16667s;

animation-delay: 0.16667s;

}

body .notch:nth-of-type(4) {

border: 2vh inset #ffe300;

height: 4vh;

width: 4vh;

top: -8vh;

left: -2vh;

-webkit-animation-delay: 0.22222s;

animation-delay: 0.22222s;

}

body .notch:nth-of-type(5) {

border: 2vh inset #e3ff00;

height: 5vh;

width: 5vh;

top: -12.5vh;

left: -2.5vh;

-webkit-animation-delay: 0.27778s;

animation-delay: 0.27778s;

}

body .notch:nth-of-type(6) {

border: 2vh inset #af0;

height: 6vh;

width: 6vh;

top: -18vh;

left: -3vh;

-webkit-animation-delay: 0.33333s;

animation-delay: 0.33333s;

}

body .notch:nth-of-type(7) {

border: 2vh inset #71ff00;

height: 7vh;

width: 7vh;

top: -24.5vh;

left: -3.5vh;

-webkit-animation-delay: 0.38889s;

animation-delay: 0.38889s;

}

body .notch:nth-of-type(8) {

border: 2vh inset #39ff00;

height: 8vh;

width: 8vh;

top: -32vh;

left: -4vh;

-webkit-animation-delay: 0.44444s;

animation-delay: 0.44444s;

}

body .notch:nth-of-type(9) {

border: 2vh inset lime;

height: 9vh;

width: 9vh;

top: -40.5vh;

left: -4.5vh;

-webkit-animation-delay: 0.5s;

animation-delay: 0.5s;

}

body .notch:nth-of-type(10) {

border: 2vh inset #00ff39;

height: 10vh;

width: 10vh;

top: -50vh;

left: -5vh;

-webkit-animation-delay: 0.55556s;

animation-delay: 0.55556s;

}

body .notch:nth-of-type(11) {

border: 2vh inset #00ff71;

height: 11vh;

width: 11vh;

top: -60.5vh;

left: -5.5vh;

-webkit-animation-delay: 0.61111s;

animation-delay: 0.61111s;

}

body .notch:nth-of-type(12) {

border: 2vh inset #0fa;

height: 12vh;

width: 12vh;

top: -72vh;

left: -6vh;

-webkit-animation-delay: 0.66667s;

animation-delay: 0.66667s;

}

body .notch:nth-of-type(13) {

border: 2vh inset #00ffe3;

height: 13vh;

width: 13vh;

top: -84.5vh;

left: -6.5vh;

-webkit-animation-delay: 0.72222s;

animation-delay: 0.72222s;

}

body .notch:nth-of-type(14) {

border: 2vh inset #00e3ff;

height: 14vh;

width: 14vh;

top: -98vh;

left: -7vh;

-webkit-animation-delay: 0.77778s;

animation-delay: 0.77778s;

}

body .notch:nth-of-type(15) {

border: 2vh inset #0af;

height: 15vh;

width: 15vh;

top: -112.5vh;

left: -7.5vh;

-webkit-animation-delay: 0.83333s;

animation-delay: 0.83333s;

}

body .notch:nth-of-type(16) {

border: 2vh inset #0071ff;

height: 16vh;

width: 16vh;

top: -128vh;

left: -8vh;

-webkit-animation-delay: 0.88889s;

animation-delay: 0.88889s;

}

body .notch:nth-of-type(17) {

border: 2vh inset #0039ff;

height: 17vh;

width: 17vh;

top: -144.5vh;

left: -8.5vh;

-webkit-animation-delay: 0.94444s;

animation-delay: 0.94444s;

}

body .notch:nth-of-type(18) {

border: 2vh inset blue;

height: 18vh;

width: 18vh;

top: -162vh;

left: -9vh;

-webkit-animation-delay: 1s;

animation-delay: 1s;

}

body .notch:nth-of-type(19) {

border: 2vh inset #3900ff;

height: 19vh;

width: 19vh;

top: -180.5vh;

left: -9.5vh;

-webkit-animation-delay: 1.05556s;

animation-delay: 1.05556s;

}

body .notch:nth-of-type(20) {

border: 2vh inset #7100ff;

height: 20vh;

width: 20vh;

top: -200vh;

left: -10vh;

-webkit-animation-delay: 1.11111s;

animation-delay: 1.11111s;

}

body .notch:nth-of-type(21) {

border: 2vh inset #a0f;

height: 21vh;

width: 21vh;

top: -220.5vh;

left: -10.5vh;

-webkit-animation-delay: 1.16667s;

animation-delay: 1.16667s;

}

body .notch:nth-of-type(22) {

border: 2vh inset #e300ff;

height: 22vh;

width: 22vh;

top: -242vh;

left: -11vh;

-webkit-animation-delay: 1.22222s;

animation-delay: 1.22222s;

}

body .notch:nth-of-type(23) {

border: 2vh inset #ff00e3;

height: 23vh;

width: 23vh;

top: -264.5vh;

left: -11.5vh;

-webkit-animation-delay: 1.27778s;

animation-delay: 1.27778s;

}

body .notch:nth-of-type(24) {

border: 2vh inset #f0a;

height: 24vh;

width: 24vh;

top: -288vh;

left: -12vh;

-webkit-animation-delay: 1.33333s;

animation-delay: 1.33333s;

}

body .notch:nth-of-type(25) {

border: 2vh inset #ff0071;

height: 25vh;

width: 25vh;

top: -312.5vh;

left: -12.5vh;

-webkit-animation-delay: 1.38889s;

animation-delay: 1.38889s;

}

body .notch:nth-of-type(26) {

border: 2vh inset #ff0039;

height: 26vh;

width: 26vh;

top: -338vh;

left: -13vh;

-webkit-animation-delay: 1.44444s;

animation-delay: 1.44444s;

}

body .notch:nth-of-type(27) {

border: 2vh inset red;

height: 27vh;

width: 27vh;

top: -364.5vh;

left: -13.5vh;

-webkit-animation-delay: 1.5s;

animation-delay: 1.5s;

}

@-webkit-keyframes thing {

to {

-webkit-transform: scale(3.5) rotateZ(360deg);

transform: scale(3.5) rotateZ(360deg);

}

}

@keyframes thing {

to {

-webkit-transform: scale(3.5) rotateZ(360deg);

transform: scale(3.5) rotateZ(360deg);

}

}