{"html":"

\n\n

\n","css":".sphere {\n width: 300px;\n height: 300px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n overflow: visible;\n border-radius: 100%;\n transform-style: preserve-3d;\n animation: rotate 8s linear infinite;\n position: relative;\n}\n\n/* Meridian styles */\n.sphere .meridian {\n position: absolute;\n width: 300px;\n height: 300px;\n border: 1px solid rgba(0, 0, 0, 0.25);\n border-radius: 100%;\n transform-style: preserve-3d;\n box-shadow: inset 0 0 8px rgba(0, 0, 255, 0.05);\n}\n.sphere .meridian:nth-child(1) {\n transform: rotateX(10deg);\n}\n.sphere .meridian:nth-child(2) {\n transform: rotateX(20deg);\n}\n.sphere .meridian:nth-child(3) {\n transform: rotateX(30deg);\n}\n.sphere .meridian:nth-child(4) {\n transform: rotateX(40deg);\n}\n.sphere .meridian:nth-child(5) {\n transform: rotateX(50deg);\n}\n.sphere .meridian:nth-child(6) {\n transform: rotateX(60deg);\n}\n.sphere .meridian:nth-child(7) {\n transform: rotateX(70deg);\n}\n.sphere .meridian:nth-child(8) {\n transform: rotateX(80deg);\n}\n.sphere .meridian:nth-child(9) {\n transform: rotateX(90deg);\n}\n.sphere .meridian:nth-child(10) {\n transform: rotateX(100deg);\n}\n.sphere .meridian:nth-child(11) {\n transform: rotateX(110deg);\n}\n.sphere .meridian:nth-child(12) {\n transform: rotateX(120deg);\n}\n.sphere .meridian:nth-child(13) {\n transform: rotateX(130deg);\n}\n.sphere .meridian:nth-child(14) {\n transform: rotateX(140deg);\n}\n.sphere .meridian:nth-child(15) {\n transform: rotateX(150deg);\n}\n.sphere .meridian:nth-child(16) {\n transform: rotateX(160deg);\n}\n.sphere .meridian:nth-child(17) {\n transform: rotateX(170deg);\n}\n.sphere .meridian:nth-child(18) {\n transform: rotateX(180deg);\n}\n.sphere .meridian:nth-child(19) {\n transform: rotateX(190deg);\n}\n.sphere .meridian:nth-child(20) {\n transform: rotateX(200deg);\n}\n.sphere .meridian:nth-child(21) {\n transform: rotateX(210deg);\n}\n.sphere .meridian:nth-child(22) {\n transform: rotateX(220deg);\n}\n.sphere .meridian:nth-child(23) {\n transform: rotateX(230deg);\n}\n.sphere .meridian:nth-child(24) {\n transform: rotateX(240deg);\n}\n.sphere .meridian:nth-child(25) {\n transform: rotateX(250deg);\n}\n.sphere .meridian:nth-child(26) {\n transform: rotateX(260deg);\n}\n.sphere .meridian:nth-child(27) {\n transform: rotateX(270deg);\n}\n.sphere .meridian:nth-child(28) {\n transform: rotateX(280deg);\n}\n.sphere .meridian:nth-child(29) {\n transform: rotateX(290deg);\n}\n.sphere .meridian:nth-child(30) {\n transform: rotateX(300deg);\n}\n.sphere .meridian:nth-child(31) {\n transform: rotateX(310deg);\n}\n.sphere .meridian:nth-child(32) {\n transform: rotateX(320deg);\n}\n.sphere .meridian:nth-child(33) {\n transform: rotateX(330deg);\n}\n.sphere .meridian:nth-child(34) {\n transform: rotateX(340deg);\n}\n.sphere .meridian:nth-child(35) {\n transform: rotateX(350deg);\n}\n.sphere .meridian:nth-child(36) {\n transform: rotateX(360deg);\n}\n\n/* Latitude styles */\n.sphere .latitude {\n position: absolute;\n width: 300px;\n height: 300px;\n border: 1px solid rgba(0, 0, 0, 0.25);\n transform: rotateY(90deg);\n border-radius: 100%;\n box-shadow: inset 0 0 5px rgba(0, 128, 0, 0.3);\n}\n.sphere .latitude:nth-child(37) {\n width: 296px;\n height: 296px;\n top: 2px;\n left: 2px;\n transform: rotateY(90deg) translateZ(-25px);\n}\n.sphere .latitude:nth-child(38) {\n width: 280px;\n height: 280px;\n top: 10px;\n left: 10px;\n transform: rotateY(90deg) translateZ(-50px);\n}\n.sphere .latitude:nth-child(39) {\n width: 260px;\n height: 260px;\n top: 20px;\n left: 20px;\n transform: rotateY(90deg) translateZ(-75px);\n}\n.sphere .latitude:nth-child(40) {\n width: 220px;\n height: 220px;\n top: 40px;\n left: 40px;\n transform: rotateY(90deg) translateZ(-100px);\n}\n.sphere .latitude:nth-child(41) {\n width: 160px;\n height: 160px;\n top: 70px;\n left: 70px;\n transform: rotateY(90deg) translateZ(-125px);\n}\n/* pole dot */\n.sphere .latitude:nth-child(42) {\n width: 20px;\n height: 20px;\n top: 140px;\n left: 140px;\n border: 10px solid black;\n transform: rotateY(90deg) translateZ(-150px);\n}\n.sphere .latitude:nth-child(43) {\n width: 296px;\n height: 296px;\n top: 2px;\n left: 2px;\n transform: rotateY(90deg) translateZ(25px);\n}\n.sphere .latitude:nth-child(44) {\n width: 280px;\n height: 280px;\n top: 10px;\n left: 10px;\n transform: rotateY(90deg) translateZ(50px);\n}\n.sphere .latitude:nth-child(45) {\n width: 260px;\n height: 260px;\n top: 20px;\n left: 20px;\n transform: rotateY(90deg) translateZ(75px);\n}\n.sphere .latitude:nth-child(46) {\n width: 220px;\n height: 220px;\n top: 40px;\n left: 40px;\n transform: rotateY(90deg) translateZ(100px);\n}\n.sphere .latitude:nth-child(47) {\n width: 160px;\n height: 160px;\n top: 70px;\n left: 70px;\n transform: rotateY(90deg) translateZ(125px);\n}\n/* pole dot */\n.sphere .latitude:nth-child(48) {\n width: 20px;\n height: 20px;\n top: 140px;\n left: 140px;\n transform: rotateY(90deg) translateZ(150px);\n border: 10px solid black;\n}\n\n/* Axis styles */\n.sphere .axis {\n position: absolute;\n width: 600px;\n height: 2px;\n top: calc(50% - 1px);\n background: linear-gradient(to left, transparent, black, transparent);\n}\n.sphere .axis + .axis {\n transform: rotateX(90deg);\n}\n\n@keyframes rotate {\n 0% {\n transform: rotateX(30deg) rotateY(0deg) rotateZ(80deg);\n }\n 100% {\n transform: rotateX(30deg) rotateY(360deg) rotateZ(80deg);\n }\n}\n\n@keyframes border-color-pulse {\n 0% {\n border-color: red;\n }\n 100% {\n border-color: black;\n }\n}\n"}

big-bear-12

👁 实时预览

📝 源代码