{"html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":".bg {\n background: radial-gradient(circle at center, #1a1a24 0%, #000000 100%);\n overflow: hidden;\n font-family: sans-serif;\n width: 100%;\n height: 100%;\n}\n.tracker {\n position: absolute;\n width: 20%;\n height: 20%;\n z-index: 100;\n}\n.tr-1 {\n top: 0;\n left: 0;\n}\n.tr-2 {\n top: 0;\n left: 20%;\n}\n.tr-3 {\n top: 0;\n left: 40%;\n}\n.tr-4 {\n top: 0;\n left: 60%;\n}\n.tr-5 {\n top: 0;\n left: 80%;\n}\n.tr-6 {\n top: 20%;\n left: 0;\n}\n.tr-7 {\n top: 20%;\n left: 20%;\n}\n.tr-8 {\n top: 20%;\n left: 40%;\n}\n.tr-9 {\n top: 20%;\n left: 60%;\n}\n.tr-10 {\n top: 20%;\n left: 80%;\n}\n.tr-11 {\n top: 40%;\n left: 0;\n}\n.tr-12 {\n top: 40%;\n left: 20%;\n}\n.tr-13 {\n top: 40%;\n left: 40%;\n}\n.tr-14 {\n top: 40%;\n left: 60%;\n}\n.tr-15 {\n top: 40%;\n left: 80%;\n}\n.tr-16 {\n top: 60%;\n left: 0;\n}\n.tr-17 {\n top: 60%;\n left: 20%;\n}\n.tr-18 {\n top: 60%;\n left: 40%;\n}\n.tr-19 {\n top: 60%;\n left: 60%;\n}\n.tr-20 {\n top: 60%;\n left: 80%;\n}\n.tr-21 {\n top: 80%;\n left: 0;\n}\n.tr-22 {\n top: 80%;\n left: 20%;\n}\n.tr-23 {\n top: 80%;\n left: 40%;\n}\n.tr-24 {\n top: 80%;\n left: 60%;\n}\n.tr-25 {\n top: 80%;\n left: 80%;\n}\n.tr-1:hover ~ .stage .scene {\n transform: rotateX(30deg) rotateY(-30deg);\n}\n.tr-2:hover ~ .stage .scene {\n transform: rotateX(30deg) rotateY(-15deg);\n}\n.tr-3:hover ~ .stage .scene {\n transform: rotateX(30deg) rotateY(0deg);\n}\n.tr-4:hover ~ .stage .scene {\n transform: rotateX(30deg) rotateY(15deg);\n}\n.tr-5:hover ~ .stage .scene {\n transform: rotateX(30deg) rotateY(30deg);\n}\n.tr-6:hover ~ .stage .scene {\n transform: rotateX(15deg) rotateY(-30deg);\n}\n.tr-7:hover ~ .stage .scene {\n transform: rotateX(15deg) rotateY(-15deg);\n}\n.tr-8:hover ~ .stage .scene {\n transform: rotateX(15deg) rotateY(0deg);\n}\n.tr-9:hover ~ .stage .scene {\n transform: rotateX(15deg) rotateY(15deg);\n}\n.tr-10:hover ~ .stage .scene {\n transform: rotateX(15deg) rotateY(30deg);\n}\n.tr-11:hover ~ .stage .scene {\n transform: rotateX(0deg) rotateY(-30deg);\n}\n.tr-12:hover ~ .stage .scene {\n transform: rotateX(0deg) rotateY(-15deg);\n}\n.tr-13:hover ~ .stage .scene {\n transform: rotateX(0deg) rotateY(0deg);\n}\n.tr-14:hover ~ .stage .scene {\n transform: rotateX(0deg) rotateY(15deg);\n}\n.tr-15:hover ~ .stage .scene {\n transform: rotateX(0deg) rotateY(30deg);\n}\n.tr-16:hover ~ .stage .scene {\n transform: rotateX(-15deg) rotateY(-30deg);\n}\n.tr-17:hover ~ .stage .scene {\n transform: rotateX(-15deg) rotateY(-15deg);\n}\n.tr-18:hover ~ .stage .scene {\n transform: rotateX(-15deg) rotateY(0deg);\n}\n.tr-19:hover ~ .stage .scene {\n transform: rotateX(-15deg) rotateY(15deg);\n}\n.tr-20:hover ~ .stage .scene {\n transform: rotateX(-15deg) rotateY(30deg);\n}\n.tr-21:hover ~ .stage .scene {\n transform: rotateX(-30deg) rotateY(-30deg);\n}\n.tr-22:hover ~ .stage .scene {\n transform: rotateX(-30deg) rotateY(-15deg);\n}\n.tr-23:hover ~ .stage .scene {\n transform: rotateX(-30deg) rotateY(0deg);\n}\n.tr-24:hover ~ .stage .scene {\n transform: rotateX(-30deg) rotateY(15deg);\n}\n.tr-25:hover ~ .stage .scene {\n transform: rotateX(-30deg) rotateY(30deg);\n}\n.glow-background {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 400px;\n height: 400px;\n background: radial-gradient(\n circle,\n rgba(255, 20, 50, 0.25) 0%,\n rgba(255, 0, 100, 0.05) 40%,\n transparent 70%\n );\n border-radius: 50%;\n z-index: 1;\n animation: pulse 5s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;\n pointer-events: none;\n will-change: transform, opacity;\n}\n@keyframes pulse {\n 0% {\n transform: translate(-50%, -50%) scale(0.85);\n opacity: 0.5;\n }\n 100% {\n transform: translate(-50%, -50%) scale(1.15);\n opacity: 1;\n }\n}\n.particles {\n position: absolute;\n width: 100%;\n height: 100%;\n perspective: 800px;\n pointer-events: none;\n transform-style: preserve-3d;\n z-index: 2;\n}\n.dust {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 4px;\n height: 4px;\n background: #ff5577;\n border-radius: 50%;\n transform-style: preserve-3d;\n will-change: transform;\n}\n.d1 {\n box-shadow:\n 120px 80px 1px 1px rgba(255, 85, 119, 0.8),\n -150px -90px 2px 0 rgba(255, 85, 119, 0.5),\n 200px -200px 1px 1px rgba(255, 85, 119, 0.7),\n -250px 180px 3px 0 rgba(255, 85, 119, 0.4),\n 50px 280px 1px 1px rgba(255, 85, 119, 0.6),\n -80px -250px 2px 1px rgba(255, 85, 119, 0.8),\n 300px 50px 1px 0 rgba(255, 85, 119, 0.5),\n -320px -50px 2px 1px rgba(255, 85, 119, 0.7),\n 180px 220px 1px 1px rgba(255, 85, 119, 0.9),\n -190px -210px 2px 0 rgba(255, 85, 119, 0.4);\n animation: spin-dust 40s linear infinite;\n}\n.d2 {\n box-shadow:\n 100px -150px 2px 1px rgba(255, 85, 119, 0.6),\n -120px 180px 1px 0 rgba(255, 85, 119, 0.9),\n 250px 150px 3px 1px rgba(255, 85, 119, 0.5),\n -220px -180px 1px 1px rgba(255, 85, 119, 0.8),\n 80px -300px 2px 0 rgba(255, 85, 119, 0.4),\n -50px 290px 1px 1px rgba(255, 85, 119, 0.7),\n 310px -100px 2px 1px rgba(255, 85, 119, 0.6),\n -290px 120px 1px 0 rgba(255, 85, 119, 0.9),\n 140px -260px 2px 1px rgba(255, 85, 119, 0.5),\n -160px 240px 1px 1px rgba(255, 85, 119, 0.8);\n animation: spin-dust 55s linear infinite reverse;\n}\n.d3 {\n box-shadow:\n 50px 50px 1px 1px rgba(255, 85, 119, 0.8),\n -70px -60px 2px 0 rgba(255, 85, 119, 0.5),\n 140px 120px 1px 1px rgba(255, 85, 119, 0.7),\n -160px -140px 3px 0 rgba(255, 85, 119, 0.4),\n 220px 200px 1px 1px rgba(255, 85, 119, 0.6),\n -240px -220px 2px 1px rgba(255, 85, 119, 0.8),\n 350px 300px 1px 0 rgba(255, 85, 119, 0.5),\n -370px -320px 2px 1px rgba(255, 85, 119, 0.7),\n 280px 260px 1px 1px rgba(255, 85, 119, 0.9),\n -300px -280px 2px 0 rgba(255, 85, 119, 0.4);\n animation: spin-dust 70s linear infinite;\n}\n@keyframes spin-dust {\n 0% {\n transform: translateZ(-200px) rotateZ(0deg) rotateX(20deg);\n }\n 100% {\n transform: translateZ(-200px) rotateZ(360deg) rotateX(20deg);\n }\n}\n.stage {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n perspective: 1200px;\n pointer-events: none;\n z-index: 10;\n}\n.scene {\n width: 0;\n height: 0;\n transform-style: preserve-3d;\n transition: transform 1.2s cubic-bezier(0.1, 1, 0.2, 1);\n will-change: transform;\n}\n.bob-wrapper {\n transform-style: preserve-3d;\n animation: bob 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n will-change: transform;\n}\n@keyframes bob {\n 0%,\n 100% {\n transform: translateY(-12px);\n }\n 50% {\n transform: translateY(12px);\n }\n}\n.diamond {\n transform-style: preserve-3d;\n animation: spin 14s linear infinite;\n will-change: transform;\n}\n@keyframes spin {\n 0% {\n transform: rotateY(0deg);\n }\n 100% {\n transform: rotateY(360deg);\n }\n}\n.facet {\n position: absolute;\n left: 50%;\n top: 50%;\n margin-left: -50px;\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n background-size: 200% 200%;\n animation: shimmer 5s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;\n border: 1px solid rgba(255, 100, 150, 0.1);\n box-sizing: border-box;\n will-change: background-position, filter;\n}\n@keyframes shimmer {\n 0% {\n background-position: 0% 0%;\n filter: brightness(0.85);\n }\n 100% {\n background-position: 100% 100%;\n filter: brightness(1.35);\n }\n}\n.c1,\n.c3,\n.c5,\n.c7,\n.p1,\n.p3,\n.p5,\n.p7 {\n background-image: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.4) 0%,\n rgba(255, 20, 50, 0.6) 40%,\n rgba(150, 0, 30, 0.8) 100%\n );\n}\n.c2,\n.c4,\n.c6,\n.c8,\n.p2,\n.p4,\n.p6,\n.p8 {\n background-image: linear-gradient(\n -45deg,\n rgba(255, 255, 255, 0.2) 0%,\n rgba(255, 0, 80, 0.7) 60%,\n rgba(100, 0, 20, 0.9) 100%\n );\n}\n.table {\n background-image: radial-gradient(\n circle at center,\n rgba(255, 255, 255, 0.5) 0%,\n rgba(255, 20, 50, 0.6) 50%,\n rgba(150, 0, 30, 0.8) 100%\n );\n}\n.c1,\n.p1 {\n animation-delay: 0s;\n}\n.c2,\n.p2 {\n animation-delay: 0.6s;\n}\n.c3,\n.p3 {\n animation-delay: 1.2s;\n}\n.c4,\n.p4 {\n animation-delay: 1.8s;\n}\n.c5,\n.p5 {\n animation-delay: 2.4s;\n}\n.c6,\n.p6 {\n animation-delay: 3s;\n}\n.c7,\n.p7 {\n animation-delay: 3.6s;\n}\n.c8,\n.p8 {\n animation-delay: 4.2s;\n}\n.crown {\n width: 100px;\n height: 69.5px;\n margin-top: -69.5px;\n transform-origin: bottom center;\n clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);\n}\n.pavilion {\n width: 100px;\n height: 192.5px;\n margin-top: 0;\n transform-origin: top center;\n clip-path: polygon(0 0, 100% 0, 50% 100%);\n}\n.table {\n width: 144.86px;\n height: 144.86px;\n margin-left: -72.43px;\n margin-top: -72.43px;\n transform: translateY(-50px) rotateX(90deg);\n clip-path: polygon(\n 29.3% 0%,\n 70.7% 0%,\n 100% 29.3%,\n 100% 70.7%,\n 70.7% 100%,\n 29.3% 100%,\n 0% 70.7%,\n 0% 29.3%\n );\n}\n.c1 {\n transform: rotateY(0deg) translateZ(120.7px) rotateX(44deg);\n}\n.c2 {\n transform: rotateY(45deg) translateZ(120.7px) rotateX(44deg);\n}\n.c3 {\n transform: rotateY(90deg) translateZ(120.7px) rotateX(44deg);\n}\n.c4 {\n transform: rotateY(135deg) translateZ(120.7px) rotateX(44deg);\n}\n.c5 {\n transform: rotateY(180deg) translateZ(120.7px) rotateX(44deg);\n}\n.c6 {\n transform: rotateY(225deg) translateZ(120.7px) rotateX(44deg);\n}\n.c7 {\n transform: rotateY(270deg) translateZ(120.7px) rotateX(44deg);\n}\n.c8 {\n transform: rotateY(315deg) translateZ(120.7px) rotateX(44deg);\n}\n.p1 {\n transform: rotateY(0deg) translateZ(120.7px) rotateX(-38.8deg);\n}\n.p2 {\n transform: rotateY(45deg) translateZ(120.7px) rotateX(-38.8deg);\n}\n.p3 {\n transform: rotateY(90deg) translateZ(120.7px) rotateX(-38.8deg);\n}\n.p4 {\n transform: rotateY(135deg) translateZ(120.7px) rotateX(-38.8deg);\n}\n.p5 {\n transform: rotateY(180deg) translateZ(120.7px) rotateX(-38.8deg);\n}\n.p6 {\n transform: rotateY(225deg) translateZ(120.7px) rotateX(-38.8deg);\n}\n.p7 {\n transform: rotateY(270deg) translateZ(120.7px) rotateX(-38.8deg);\n}\n.p8 {\n transform: rotateY(315deg) translateZ(120.7px) rotateX(-38.8deg);\n}\n"}

average-otter-23

👁 实时预览

📝 源代码