css 3d环形,CSS3 飞行的3D圆环

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);

}

}