<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯css美味甜甜圈3D蠕动效果</title> <style> body { overflow: hidden; margin: 0; height: 100vh; perspective: 20em; perspective-origin: 50% calc(50% - 10em); background: #000; color: #fff; } div { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; } .assembly { transform: translateZ(-8em) rotateX(-30deg) scaleX(1.25); } .rotY { animation: ry 2s linear infinite; } @keyframes ry { to { transform: rotateY(20deg); } } .rotX { animation: rx 2s ease-in-out infinite; } @keyframes rx { 0%, 75% { transform: none; } 100% { transform: rotateX(-20deg); } } .ring:nth-child(1) { transform: rotateY(0deg) translateZ(8em); } .ring:nth-child(1) .rotX { animation-delay: 0s; } .ring:nth-child(2) { transform: rotateY(10deg) translateZ(8em); } .ring:nth-child(2) .rotX { animation-delay: -0.05556s; } .ring:nth-child(3) { transform: rotateY(20deg) translateZ(8em); } .ring:nth-child(3) .rotX { animation-delay: -0.11111s; } .ring:nth-child(4) { transform: rotateY(30deg) translateZ(8em); } .ring:nth-child(4) .rotX { animation-delay: -0.16667s; } .ring:nth-child(5) { transform: rotateY(40deg) translateZ(8em); } .ring:nth-child(5) .rotX { animation-delay: -0.22222s; } .ring:nth-child(6) { transform: rotateY(50deg) translateZ(8em); } .ring:nth-child(6) .rotX { animation-delay: -0.27778s; } .ring:nth-child(7) { transform: rotateY(60deg) translateZ(8em); } .ring:nth-child(7) .rotX { animation-delay: -0.33333s; } .ring:nth-child(8) { transform: rotateY(70deg) translateZ(8em); } .ring:nth-child(8) .rotX { animation-delay: -0.38889s; } .ring:nth-child(9) { transform: rotateY(80deg) translateZ(8em); } .ring:nth-child(9) .rotX { animation-delay: -0.44444s; } .ring:nth-child(10) { transform: rotateY(90deg) translateZ(8em); } .ring:nth-child(10) .rotX { animation-delay: -0.5s; } .ring:nth-child(11) { transform: rotateY(100deg) translateZ(8em); } .ring:nth-child(11) .rotX { animation-delay: -0.55556s; } .ring:nth-child(12) { transform: rotateY(110deg) translateZ(8em); } .ring:nth-child(12) .rotX { animation-delay: -0.61111s; } .ring:nth-child(13) { transform: rotateY(120deg) translateZ(8em); } .ring:nth-child(13) .rotX { animation-delay: -0.66667s; } .ring:nth-child(14) { transform: rotateY(130deg) translateZ(8em); } .ring:nth-child(14) .rotX { animation-delay: -0.72222s; } .ring:nth-child(15) { transform: rotateY(140deg) translateZ(8em); } .ring:nth-child(15) .rotX { animation-delay: -0.77778s; } .ring:nth-child(16) { transform: rotateY(150deg) translateZ(8em); } .ring:nth-child(16) .rotX { animation-delay: -0.83333s; } .ring:nth-child(17) { transform: rotateY(160deg) translateZ(8em); } .ring:nth-child(17) .rotX { animation-delay: -0.88889s; } .ring:nth-child(18) { transform: rotateY(170deg) translateZ(8em); } .ring:nth-child(18) .rotX { animation-delay: -0.94444s; } .ring:nth-child(19) { transform: rotateY(180deg) translateZ(8em); } .ring:nth-child(19) .rotX { animation-delay: -1s; } .ring:nth-child(20) { transform: rotateY(190deg) translateZ(8em); } .ring:nth-child(20) .rotX { animation-delay: -1.05556s; } .ring:nth-child(21) { transform: rotateY(200deg) translateZ(8em); } .ring:nth-child(21) .rotX { animation-delay: -1.11111s; } .ring:nth-child(22) { transform: rotateY(210deg) translateZ(8em); } .ring:nth-child(22) .rotX { animation-delay: -1.16667s; } .ring:nth-child(23) { transform: rotateY(220deg) translateZ(8em); } .ring:nth-child(23) .rotX { animation-delay: -1.22222s; } .ring:nth-child(24) { transform: rotateY(230deg) translateZ(8em); } .ring:nth-child(24) .rotX { animation-delay: -1.27778s; } .ring:nth-child(25) { transform: rotateY(240deg) translateZ(8em); } .ring:nth-child(25) .rotX { animation-delay: -1.33333s; } .ring:nth-child(26) { transform: rotateY(250deg) translateZ(8em); } .ring:nth-child(26) .rotX { animation-delay: -1.38889s; } .ring:nth-child(27) { transform: rotateY(260deg) translateZ(8em); } .ring:nth-child(27) .rotX { animation-delay: -1.44444s; } .ring:nth-child(28) { transform: rotateY(270deg) translateZ(8em); } .ring:nth-child(28) .rotX { animation-delay: -1.5s; } .ring:nth-child(29) { transform: rotateY(280deg) translateZ(8em); } .ring:nth-child(29) .rotX { animation-delay: -1.55556s; } .ring:nth-child(30) { transform: rotateY(290deg) translateZ(8em); } .ring:nth-child(30) .rotX { animation-delay: -1.61111s; } .ring:nth-child(31) { transform: rotateY(300deg) translateZ(8em); } .ring:nth-child(31) .rotX { animation-delay: -1.66667s; } .ring:nth-child(32) { transform: rotateY(310deg) translateZ(8em); } .ring:nth-child(32) .rotX { animation-delay: -1.72222s; } .ring:nth-child(33) { transform: rotateY(320deg) translateZ(8em); } .ring:nth-child(33) .rotX { animation-delay: -1.77778s; } .ring:nth-child(34) { transform: rotateY(330deg) translateZ(8em); } .ring:nth-child(34) .rotX { animation-delay: -1.83333s; } .ring:nth-child(35) { transform: rotateY(340deg) translateZ(8em); } .ring:nth-child(35) .rotX { animation-delay: -1.88889s; } .ring:nth-child(36) { transform: rotateY(350deg) translateZ(8em); } .ring:nth-child(36) .rotX { animation-delay: -1.94444s; } .dot { margin: -0.375em; width: 0.75em; height: 0.75em; border-radius: 50%; backface-visibility: hidden; background: currentColor; } .ring:nth-child(2n + 0) .dot:nth-child(1) { transform: rotateX(0deg) translateZ(5em); } .ring:nth-child(2n + 0) .dot:nth-child(2) { transform: rotateX(20deg) translateZ(5em); } .ring:nth-child(2n + 0) .dot:nth-child(3) { transform: rotateX(40deg) translateZ(5em); } .ring:nth-child(2n + 0) .dot:nth-child(4) { transform: rotateX(60deg) translateZ(5em); } .ring:nth-child(2n + 0) .dot:nth-child(5) { transform: rotateX(80deg) translateZ(5em); } .ring:nth-child(2n + 0) .dot:nth-child(6) { transform: rotateX(100deg) translateZ(5em); } .ring:nth-child(2n + 0) .dot:nth-child(7) { transform: rotateX(120deg) translateZ(5em); } .ring:nth-child(2n + 0) .dot:nth-child(8) { transform: rotateX(140deg) translateZ(5em); } .ring:nth-child(2n + 0) .dot:nth-child(9) { transform: rotateX(160deg) translateZ(5em); } .ring:nth-child(2n + 0) .dot:nth-child(10) { transform: rotateX(180deg) translateZ(5em); } .ring:nth-child(2n + 0) .dot:nth-child(11) { transform: rotateX(200deg) translateZ(5em); } .ring:nth-child(2n + 0) .dot:nth-child(12) { transform: rotateX(220deg) translateZ(5em); } .ring:nth-child(2n + 0) .dot:nth-child(13) { transform: rotateX(240deg) translateZ(5em); } .ring:nth-child(2n + 0) .dot:nth-child(14) { transform: rotateX(260deg) translateZ(5em); } .ring:nth-child(2n + 0) .dot:nth-child(15) { transform: rotateX(280deg) translateZ(5em); } .ring:nth-child(2n + 0) .dot:nth-child(16) { transform: rotateX(300deg) translateZ(5em); } .ring:nth-child(2n + 0) .dot:nth-child(17) { transform: rotateX(320deg) translateZ(5em); } .ring:nth-child(2n + 0) .dot:nth-child(18) { transform: rotateX(340deg) translateZ(5em); } .ring:nth-child(2n + 1) .dot:nth-child(1) { transform: rotateX(10deg) translateZ(5em); } .ring:nth-child(2n + 1) .dot:nth-child(2) { transform: rotateX(30deg) translateZ(5em); } .ring:nth-child(2n + 1) .dot:nth-child(3) { transform: rotateX(50deg) translateZ(5em); } .ring:nth-child(2n + 1) .dot:nth-child(4) { transform: rotateX(70deg) translateZ(5em); } .ring:nth-child(2n + 1) .dot:nth-child(5) { transform: rotateX(90deg) translateZ(5em); } .ring:nth-child(2n + 1) .dot:nth-child(6) { transform: rotateX(110deg) translateZ(5em); } .ring:nth-child(2n + 1) .dot:nth-child(7) { transform: rotateX(130deg) translateZ(5em); } .ring:nth-child(2n + 1) .dot:nth-child(8) { transform: rotateX(150deg) translateZ(5em); } .ring:nth-child(2n + 1) .dot:nth-child(9) { transform: rotateX(170deg) translateZ(5em); } .ring:nth-child(2n + 1) .dot:nth-child(10) { transform: rotateX(190deg) translateZ(5em); } .ring:nth-child(2n + 1) .dot:nth-child(11) { transform: rotateX(210deg) translateZ(5em); } .ring:nth-child(2n + 1) .dot:nth-child(12) { transform: rotateX(230deg) translateZ(5em); } .ring:nth-child(2n + 1) .dot:nth-child(13) { transform: rotateX(250deg) translateZ(5em); } .ring:nth-child(2n + 1) .dot:nth-child(14) { transform: rotateX(270deg) translateZ(5em); } .ring:nth-child(2n + 1) .dot:nth-child(15) { transform: rotateX(290deg) translateZ(5em); } .ring:nth-child(2n + 1) .dot:nth-child(16) { transform: rotateX(310deg) translateZ(5em); } .ring:nth-child(2n + 1) .dot:nth-child(17) { transform: rotateX(330deg) translateZ(5em); } .ring:nth-child(2n + 1) .dot:nth-child(18) { transform: rotateX(350deg) translateZ(5em); } .ring:nth-child(n + 37), .dot:nth-child(n + 19) { display: none; } </style> </head> <body> <div class="assembly"> <div class="rotY"> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="ring"> <div class="rotX"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> </div> </div> </body> </html>
评论前必须登录!
注册