CSS
语言:
CSSSCSS
确定
body {
overflow: hidden;
margin: 0;
height: 100vh;
perspective: 32em;
background: #1e1c18;
}
.torus {
transform-style: preserve-3d;
animation: torus-rot 2.5s linear infinite;
}
.torus,
.torus *,
.torus:before {
position: absolute;
top: 50%;
left: 50%;
}
@keyframes torus-rot {
to {
transform: rotateY(20deg);
}
}
.ring:before {
box-sizing: border-box;
margin: -7em;
border: solid 0.625em currentColor;
border-bottom-width: 0;
border-right-color: transparent;
width: 14em;
height: 14em;
border-radius: 50%;
opacity: 0.7;
animation: ring-rot 2.5s linear infinite;
content: '';
}
.ring:nth-child(1) {
transform: rotateY(90deg) translate(7.5em) rotate(0deg);
color: red;
animation: shade1 2.5s linear infinite;
}
@keyframes shade1 {
to {
color: #f50;
}
}
.ring:nth-child(2) {
transform: rotateY(110deg) translate(7.5em) rotate(20deg);
color: #f50;
animation: shade2 2.5s linear infinite;
}
@keyframes shade2 {
to {
color: #fa0;
}
}
.ring:nth-child(3) {
transform: rotateY(130deg) translate(7.5em) rotate(40deg);
color: #fa0;
animation: shade3 2.5s linear infinite;
}
@keyframes shade3 {
to {
color: yellow;
}
}
.ring:nth-child(4) {
transform: rotateY(150deg) translate(7.5em) rotate(60deg);
color: yellow;
animation: shade4 2.5s linear infinite;
}
@keyframes shade4 {
to {
color: #af0;
}
}
.ring:nth-child(5) {
transform: rotateY(170deg) translate(7.5em) rotate(80deg);
color: #af0;
animation: shade5 2.5s linear infinite;
}
@keyframes shade5 {
to {
color: #5f0;
}
}
.ring:nth-child(6) {
transform: rotateY(190deg) translate(7.5em) rotate(100deg);
color: #5f0;
animation: shade6 2.5s linear infinite;
}
@keyframes shade6 {
to {
color: lime;
}
}
.ring:nth-child(7) {
transform: rotateY(210deg) translate(7.5em) rotate(120deg);
color: lime;
animation: shade7 2.5s linear infinite;
}
@keyframes shade7 {
to {
color: #0f5;
}
}
.ring:nth-child(8) {
transform: rotateY(230deg) translate(7.5em) rotate(140deg);
color: #0f5;
animation: shade8 2.5s linear infinite;
}
@keyframes shade8 {
to {
color: #0fa;
}
}
.ring:nth-child(9) {
transform: rotateY(250deg) translate(7.5em) rotate(160deg);
color: #0fa;
animation: shade9 2.5s linear infinite;
}
@keyframes shade9 {
to {
color: cyan;
}
}
.ring:nth-child(10) {
transform: rotateY(270deg) translate(7.5em) rotate(180deg);
color: cyan;
animation: shade10 2.5s linear infinite;
}
@keyframes shade10 {
to {
color: #0af;
}
}
.ring:nth-child(11) {
transform: rotateY(290deg) translate(7.5em) rotate(200deg);
color: #0af;
animation: shade11 2.5s linear infinite;
}
@keyframes shade11 {
to {
color: #05f;
}
}
.ring:nth-child(12) {
transform: rotateY(310deg) translate(7.5em) rotate(220deg);
color: #05f;
animation: shade12 2.5s linear infinite;
}
@keyframes shade12 {
to {
color: blue;
}
}
.ring:nth-child(13) {
transform: rotateY(330deg) translate(7.5em) rotate(240deg);
color: blue;
animation: shade13 2.5s linear infinite;
}
@keyframes shade13 {
to {
color: #50f;
}
}
.ring:nth-child(14) {
transform: rotateY(350deg) translate(7.5em) rotate(260deg);
color: #50f;
animation: shade14 2.5s linear infinite;
}
@keyframes shade14 {
to {
color: #a0f;
}
}
.ring:nth-child(15) {
transform: rotateY(370deg) translate(7.5em) rotate(280deg);
color: #a0f;
animation: shade15 2.5s linear infinite;
}
@keyframes shade15 {
to {
color: magenta;
}
}
.ring:nth-child(16) {
transform: rotateY(390deg) translate(7.5em) rotate(300deg);
color: magenta;
animation: shade16 2.5s linear infinite;
}
@keyframes shade16 {
to {
color: #f0a;
}
}
.ring:nth-child(17) {
transform: rotateY(410deg) translate(7.5em) rotate(320deg);
color: #f0a;
animation: shade17 2.5s linear infinite;
}
@keyframes shade17 {
to {
color: #f05;
}
}
.ring:nth-child(18) {
transform: rotateY(430deg) translate(7.5em) rotate(340deg);
color: #f05;
animation: shade18 2.5s linear infinite;
}
@keyframes shade18 {
to {
color: red;
}
}
@keyframes ring-rot {
to {
transform: rotate(380deg);
}
}