{"html":"

\n\n

\n","css":"#cont {\n scale: 0.6;\n z-index: 100;\n margin: 0;\n display: grid;\n place-items: center;\n height: 100%;\n background: rgb(38, 22, 22);\n perspective: 10000px;\n transform-style: preserve-3d;\n animation: spin 5s linear infinite;\n}\n\n.point {\n position: absolute;\n width: 81px;\n height: 81px;\n margin: -5px 0 0 -5px;\n border-radius: 15%;\n background: #5a90ff;\n box-shadow: 0 0 1px -0.3px #ffffff53;\n z-index: 100;\n}\n\n.base {\n scale: 0.9;\n position: absolute;\n width: 324.5px;\n height: 324.5px;\n border-radius: 100%;\n background: #60a1f514;\n box-shadow: 0 0 1px -0.3px #ffffff53;\n z-index: 0;\n}\n\n#green {\n border-radius: 0%;\n background: radial-gradient(\n ellipse 8vmin 10vmin at 20% 25%,\n var(--land-dark, #2a3d26) 0 70%,\n #5a90ff 71%\n );\n z-index: 0;\n}\n\n@keyframes spin {\n 0% {\n transform: rotateZ(90deg) rotateX(0deg);\n }\n 50% {\n transform: rotateZ(90deg) rotateX(180deg);\n }\n 100% {\n transform: rotateZ(90deg) rotateX(360deg);\n }\n}\n\n/* lon-60 */\n.point:nth-child(2) {\n transform: rotateX(-60deg) rotateY(0deg) translateZ(150px);\n}\n.point:nth-child(3) {\n transform: rotateX(-60deg) rotateY(30deg) translateZ(150px);\n}\n.point:nth-child(4) {\n transform: rotateX(-60deg) rotateY(60deg) translateZ(150px);\n}\n.point:nth-child(5) {\n transform: rotateX(-60deg) rotateY(90deg) translateZ(150px);\n}\n.point:nth-child(6) {\n transform: rotateX(-60deg) rotateY(120deg) translateZ(150px);\n}\n.point:nth-child(7) {\n transform: rotateX(-60deg) rotateY(150deg) translateZ(150px);\n}\n.point:nth-child(8) {\n transform: rotateX(-60deg) rotateY(180deg) translateZ(150px);\n}\n.point:nth-child(9) {\n transform: rotateX(-60deg) rotateY(210deg) translateZ(150px);\n}\n.point:nth-child(10) {\n transform: rotateX(-60deg) rotateY(240deg) translateZ(150px);\n}\n.point:nth-child(11) {\n transform: rotateX(-60deg) rotateY(270deg) translateZ(150px);\n}\n.point:nth-child(12) {\n transform: rotateX(-60deg) rotateY(300deg) translateZ(150px);\n}\n.point:nth-child(13) {\n transform: rotateX(-60deg) rotateY(330deg) translateZ(150px);\n}\n\n/* lon-30 */\n.point:nth-child(14) {\n transform: rotateX(-30deg) rotateY(0deg) translateZ(150px);\n}\n.point:nth-child(15) {\n transform: rotateX(-30deg) rotateY(30deg) translateZ(150px);\n}\n.point:nth-child(16) {\n transform: rotateX(-30deg) rotateY(60deg) translateZ(150px);\n}\n.point:nth-child(17) {\n transform: rotateX(-30deg) rotateY(90deg) translateZ(150px);\n}\n.point:nth-child(18) {\n transform: rotateX(-30deg) rotateY(120deg) translateZ(150px);\n}\n.point:nth-child(19) {\n transform: rotateX(-30deg) rotateY(150deg) translateZ(150px);\n}\n.point:nth-child(20) {\n transform: rotateX(-30deg) rotateY(180deg) translateZ(150px);\n}\n.point:nth-child(21) {\n transform: rotateX(-30deg) rotateY(210deg) translateZ(150px);\n}\n.point:nth-child(22) {\n transform: rotateX(-30deg) rotateY(240deg) translateZ(150px);\n}\n.point:nth-child(23) {\n transform: rotateX(-30deg) rotateY(270deg) translateZ(150px);\n}\n.point:nth-child(24) {\n transform: rotateX(-30deg) rotateY(300deg) translateZ(150px);\n}\n.point:nth-child(25) {\n transform: rotateX(-30deg) rotateY(330deg) translateZ(150px);\n}\n\n/* lon+0 */\n.point:nth-child(26) {\n transform: rotateX(0deg) rotateY(0deg) translateZ(150px);\n}\n.point:nth-child(27) {\n transform: rotateX(0deg) rotateY(30deg) translateZ(150px);\n}\n.point:nth-child(28) {\n transform: rotateX(0deg) rotateY(60deg) translateZ(150px);\n}\n.point:nth-child(29) {\n transform: rotateX(0deg) rotateY(90deg) translateZ(150px);\n}\n.point:nth-child(30) {\n transform: rotateX(0deg) rotateY(120deg) translateZ(150px);\n}\n.point:nth-child(31) {\n transform: rotateX(0deg) rotateY(150deg) translateZ(150px);\n}\n.point:nth-child(32) {\n transform: rotateX(0deg) rotateY(180deg) translateZ(150px);\n}\n.point:nth-child(33) {\n transform: rotateX(0deg) rotateY(210deg) translateZ(150px);\n}\n.point:nth-child(34) {\n transform: rotateX(0deg) rotateY(240deg) translateZ(150px);\n}\n.point:nth-child(35) {\n transform: rotateX(0deg) rotateY(270deg) translateZ(150px);\n}\n.point:nth-child(36) {\n transform: rotateX(0deg) rotateY(300deg) translateZ(150px);\n}\n.point:nth-child(37) {\n transform: rotateX(0deg) rotateY(330deg) translateZ(150px);\n}\n\n/* lon+30 */\n.point:nth-child(38) {\n transform: rotateX(30deg) rotateY(0deg) translateZ(150px);\n}\n.point:nth-child(39) {\n transform: rotateX(30deg) rotateY(30deg) translateZ(150px);\n}\n.point:nth-child(40) {\n transform: rotateX(30deg) rotateY(60deg) translateZ(150px);\n}\n.point:nth-child(41) {\n transform: rotateX(30deg) rotateY(90deg) translateZ(150px);\n}\n.point:nth-child(42) {\n transform: rotateX(30deg) rotateY(120deg) translateZ(150px);\n}\n.point:nth-child(43) {\n transform: rotateX(30deg) rotateY(150deg) translateZ(150px);\n}\n.point:nth-child(44) {\n transform: rotateX(30deg) rotateY(180deg) translateZ(150px);\n}\n.point:nth-child(45) {\n transform: rotateX(30deg) rotateY(210deg) translateZ(150px);\n}\n.point:nth-child(46) {\n transform: rotateX(30deg) rotateY(240deg) translateZ(150px);\n}\n.point:nth-child(47) {\n transform: rotateX(30deg) rotateY(270deg) translateZ(150px);\n}\n.point:nth-child(48) {\n transform: rotateX(30deg) rotateY(300deg) translateZ(150px);\n}\n.point:nth-child(49) {\n transform: rotateX(30deg) rotateY(330deg) translateZ(150px);\n}\n\n/* lon+60 */\n.point:nth-child(50) {\n transform: rotateX(60deg) rotateY(0deg) translateZ(150px);\n}\n.point:nth-child(51) {\n transform: rotateX(60deg) rotateY(30deg) translateZ(150px);\n}\n.point:nth-child(52) {\n transform: rotateX(60deg) rotateY(60deg) translateZ(150px);\n}\n.point:nth-child(53) {\n transform: rotateX(60deg) rotateY(90deg) translateZ(150px);\n}\n.point:nth-child(54) {\n transform: rotateX(60deg) rotateY(120deg) translateZ(150px);\n}\n.point:nth-child(55) {\n transform: rotateX(60deg) rotateY(150deg) translateZ(150px);\n}\n.point:nth-child(56) {\n transform: rotateX(60deg) rotateY(180deg) translateZ(150px);\n}\n.point:nth-child(57) {\n transform: rotateX(60deg) rotateY(210deg) translateZ(150px);\n}\n.point:nth-child(58) {\n transform: rotateX(60deg) rotateY(240deg) translateZ(150px);\n}\n.point:nth-child(59) {\n transform: rotateX(60deg) rotateY(270deg) translateZ(150px);\n}\n.point:nth-child(60) {\n transform: rotateX(60deg) rotateY(300deg) translateZ(150px);\n}\n.point:nth-child(61) {\n transform: rotateX(60deg) rotateY(330deg) translateZ(150px);\n}\n\n/* lon+90 */\n.point:nth-child(62) {\n transform: rotateX(90deg) rotateY(0deg) translateZ(150px);\n}\n.point:nth-child(63) {\n transform: rotateX(90deg) rotateY(30deg) translateZ(150px);\n}\n.point:nth-child(64) {\n transform: rotateX(90deg) rotateY(60deg) translateZ(150px);\n}\n.point:nth-child(65) {\n transform: rotateX(90deg) rotateY(90deg) translateZ(150px);\n}\n.point:nth-child(66) {\n transform: rotateX(90deg) rotateY(120deg) translateZ(150px);\n}\n.point:nth-child(67) {\n transform: rotateX(90deg) rotateY(150deg) translateZ(150px);\n}\n.point:nth-child(68) {\n transform: rotateX(90deg) rotateY(180deg) translateZ(150px);\n}\n.point:nth-child(69) {\n transform: rotateX(90deg) rotateY(210deg) translateZ(150px);\n}\n.point:nth-child(70) {\n transform: rotateX(90deg) rotateY(240deg) translateZ(150px);\n}\n.point:nth-child(71) {\n transform: rotateX(90deg) rotateY(270deg) translateZ(150px);\n}\n.point:nth-child(72) {\n transform: rotateX(90deg) rotateY(300deg) translateZ(150px);\n}\n.point:nth-child(73) {\n transform: rotateX(90deg) rotateY(330deg) translateZ(150px);\n}\n\n.continent {\n position: absolute;\n width: 132px;\n height: 132px;\n background: radial-gradient(rgba(98, 172, 98, 0.9) 54%, transparent 55%);\n border: 1px solid rgba(0, 0, 0, 0.525);\n transform-style: preserve-3d;\n}\n\n.c1 {\n clip-path: polygon(20% 0%, 90% 15%, 70% 95%, 10% 70%);\n transform: rotateX(10deg) rotateY(20deg) translateZ(157px);\n}\n.c2 {\n clip-path: polygon(15% 10%, 95% 20%, 80% 85%, 5% 70%);\n transform: rotateX(12deg) rotateY(23deg) translateZ(157px);\n}\n.c3 {\n clip-path: polygon(30% 0%, 85% 15%, 90% 80%, 15% 95%);\n transform: rotateX(8deg) rotateY(18deg) translateZ(157px);\n}\n.c4 {\n clip-path: polygon(25% 5%, 100% 25%, 75% 90%, 5% 70%);\n transform: rotateX(14deg) rotateY(21deg) translateZ(157px);\n}\n.c5 {\n clip-path: polygon(10% 25%, 90% 5%, 85% 70%, 30% 95%);\n transform: rotateX(9deg) rotateY(24deg) translateZ(157px);\n}\n.c6 {\n clip-path: polygon(20% 10%, 80% 0%, 95% 70%, 25% 95%);\n transform: rotateX(11deg) rotateY(16deg) translateZ(157px);\n}\n.c7 {\n clip-path: polygon(15% 0%, 95% 20%, 70% 100%, 5% 80%);\n transform: rotateX(7deg) rotateY(22deg) translateZ(157px);\n}\n.c8 {\n clip-path: polygon(25% 0%, 85% 15%, 100% 75%, 15% 95%);\n transform: rotateX(13deg) rotateY(19deg) translateZ(157px);\n}\n.c9 {\n clip-path: polygon(10% 10%, 90% 5%, 80% 85%, 20% 95%);\n transform: rotateX(10deg) rotateY(26deg) translateZ(157px);\n}\n.c10 {\n clip-path: polygon(20% 5%, 95% 25%, 70% 95%, 10% 75%);\n transform: rotateX(6deg) rotateY(20deg) translateZ(157px);\n}\n\n.c11 {\n clip-path: polygon(15% 5%, 90% 15%, 75% 95%, 5% 80%);\n transform: rotateX(-20deg) rotateY(60deg) translateZ(157px);\n}\n.c12 {\n clip-path: polygon(25% 0%, 85% 20%, 95% 75%, 10% 95%);\n transform: rotateX(-22deg) rotateY(63deg) translateZ(157px);\n}\n.c13 {\n clip-path: polygon(20% 10%, 95% 5%, 85% 80%, 15% 90%);\n transform: rotateX(-18deg) rotateY(58deg) translateZ(157px);\n}\n.c14 {\n clip-path: polygon(30% 0%, 90% 25%, 70% 95%, 5% 70%);\n transform: rotateX(-21deg) rotateY(64deg) translateZ(157px);\n}\n.c15 {\n clip-path: polygon(15% 15%, 100% 10%, 85% 85%, 20% 95%);\n transform: rotateX(-19deg) rotateY(56deg) translateZ(157px);\n}\n.c16 {\n clip-path: polygon(25% 5%, 95% 20%, 75% 90%, 10% 70%);\n transform: rotateX(-23deg) rotateY(61deg) translateZ(157px);\n}\n.c17 {\n clip-path: polygon(20% 0%, 90% 10%, 100% 70%, 15% 95%);\n transform: rotateX(-17deg) rotateY(59deg) translateZ(157px);\n}\n.c18 {\n clip-path: polygon(15% 5%, 85% 20%, 70% 85%, 5% 70%);\n transform: rotateX(-24deg) rotateY(62deg) translateZ(157px);\n}\n\n.c19 {\n transform: rotateX(40deg) rotateY(-30deg) translateZ(157px);\n clip-path: polygon(20% 0%, 90% 20%, 80% 90%, 10% 70%);\n}\n.c20 {\n transform: rotateX(42deg) rotateY(-28deg) translateZ(157px);\n clip-path: polygon(25% 5%, 95% 20%, 70% 95%, 5% 70%);\n}\n.c21 {\n transform: rotateX(38deg) rotateY(-32deg) translateZ(157px);\n clip-path: polygon(30% 0%, 85% 15%, 100% 75%, 15% 95%);\n}\n.c22 {\n transform: rotateX(43deg) rotateY(-27deg) translateZ(157px);\n clip-path: polygon(15% 10%, 90% 5%, 80% 85%, 20% 95%);\n}\n.c23 {\n transform: rotateX(39deg) rotateY(-29deg) translateZ(157px);\n clip-path: polygon(20% 5%, 95% 25%, 70% 95%, 10% 75%);\n}\n.c24 {\n transform: rotateX(41deg) rotateY(-31deg) translateZ(157px);\n clip-path: polygon(10% 20%, 90% 10%, 85% 80%, 30% 95%);\n}\n.c25 {\n transform: rotateX(44deg) rotateY(-33deg) translateZ(157px);\n clip-path: polygon(25% 0%, 100% 20%, 75% 90%, 15% 95%);\n}\n.c26 {\n transform: rotateX(37deg) rotateY(-34deg) translateZ(157px);\n clip-path: polygon(15% 15%, 85% 5%, 95% 80%, 20% 95%);\n}\n.c27 {\n transform: rotateX(45deg) rotateY(-29deg) translateZ(157px);\n clip-path: polygon(30% 0%, 90% 15%, 80% 100%, 10% 70%);\n}\n.c28 {\n transform: rotateX(36deg) rotateY(-35deg) translateZ(157px);\n clip-path: polygon(20% 0%, 80% 10%, 95% 70%, 25% 95%);\n}\n\n.c29 {\n transform: rotateX(-10deg) rotateY(150deg) translateZ(157px);\n clip-path: polygon(30% 0%, 90% 20%, 70% 90%, 10% 70%);\n}\n.c30 {\n transform: rotateX(-12deg) rotateY(153deg) translateZ(157px);\n clip-path: polygon(25% 5%, 85% 15%, 95% 75%, 15% 95%);\n}\n.c31 {\n transform: rotateX(-14deg) rotateY(156deg) translateZ(157px);\n clip-path: polygon(20% 10%, 95% 0%, 80% 85%, 20% 95%);\n}\n.c32 {\n transform: rotateX(-16deg) rotateY(159deg) translateZ(157px);\n clip-path: polygon(10% 20%, 90% 5%, 85% 70%, 30% 95%);\n}\n.c33 {\n transform: rotateX(-18deg) rotateY(162deg) translateZ(157px);\n clip-path: polygon(20% 0%, 85% 15%, 100% 75%, 15% 95%);\n}\n.c34 {\n transform: rotateX(-20deg) rotateY(165deg) translateZ(157px);\n clip-path: polygon(15% 15%, 95% 5%, 90% 85%, 25% 95%);\n}\n\n.c35 {\n transform: rotateX(5deg) rotateY(-150deg) translateZ(157px);\n clip-path: polygon(30% 0%, 90% 20%, 70% 90%, 10% 70%);\n}\n.c36 {\n transform: rotateX(-45deg) rotateY(120deg) translateZ(157px);\n clip-path: polygon(25% 5%, 95% 20%, 70% 95%, 5% 70%);\n}\n.c37 {\n transform: rotateX(50deg) rotateY(90deg) translateZ(157px);\n clip-path: polygon(20% 10%, 95% 0%, 85% 85%, 15% 95%);\n}\n.c38 {\n transform: rotateX(-60deg) rotateY(200deg) translateZ(157px);\n clip-path: polygon(10% 20%, 90% 5%, 100% 80%, 30% 95%);\n}\n.c39 {\n transform: rotateX(25deg) rotateY(-100deg) translateZ(157px);\n clip-path: polygon(20% 0%, 80% 10%, 90% 70%, 30% 95%);\n}\n.c40 {\n transform: rotateX(15deg) rotateY(75deg) translateZ(157px);\n clip-path: polygon(15% 0%, 95% 20%, 80% 85%, 10% 70%);\n}\n.c41 {\n transform: rotateX(-30deg) rotateY(-60deg) translateZ(157px);\n clip-path: polygon(25% 0%, 85% 15%, 95% 75%, 15% 95%);\n}\n.c42 {\n transform: rotateX(35deg) rotateY(140deg) translateZ(157px);\n clip-path: polygon(10% 10%, 90% 0%, 80% 80%, 20% 95%);\n}\n.c43 {\n transform: rotateX(60deg) rotateY(-10deg) translateZ(157px);\n clip-path: polygon(30% 0%, 90% 25%, 70% 95%, 10% 75%);\n}\n.c44 {\n transform: rotateX(-55deg) rotateY(-130deg) translateZ(157px);\n clip-path: polygon(20% 5%, 95% 20%, 85% 80%, 15% 90%);\n}\n.c45 {\n transform: rotateX(0deg) rotateY(30deg) translateZ(157px);\n clip-path: polygon(25% 0%, 85% 20%, 70% 90%, 5% 70%);\n}\n.c46 {\n transform: rotateX(-10deg) rotateY(-170deg) translateZ(157px);\n clip-path: polygon(15% 15%, 95% 5%, 90% 85%, 20% 95%);\n}\n.c47 {\n transform: rotateX(20deg) rotateY(200deg) translateZ(157px);\n clip-path: polygon(20% 0%, 80% 15%, 100% 70%, 15% 95%);\n}\n.c48 {\n transform: rotateX(-25deg) rotateY(15deg) translateZ(157px);\n clip-path: polygon(30% 0%, 95% 20%, 75% 95%, 10% 70%);\n}\n.c49 {\n transform: rotateX(45deg) rotateY(-200deg) translateZ(157px);\n clip-path: polygon(10% 20%, 90% 0%, 85% 70%, 20% 95%);\n}\n.c50 {\n transform: rotateX(-35deg) rotateY(180deg) translateZ(157px);\n clip-path: polygon(25% 0%, 85% 25%, 95% 75%, 15% 95%);\n}\n\n.cloud {\n position: absolute;\n width: 82px;\n height: 152px;\n background: radial-gradient(rgba(239, 218, 233, 0.697) 54%, transparent 55%);\n border: 1px solid rgba(0, 0, 0, 0.525);\n transform-style: preserve-3d;\n}\n"}

weak-starfish-54

👁 实时预览

📝 源代码