{"html":"

\n","css":".loader {\n position: relative;\n width: 160px;\n height: 160px;\n transform-style: preserve-3d;\n perspective: 1200px;\n}\n\n/* Central node */\n.node {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 12px;\n height: 12px;\n background: #ffaa00; /* Bright amber glow */\n border-radius: 50%;\n transform: translate(-50%, -50%);\n box-shadow:\n 0 0 20px #ffaa00,\n 0 0 40px rgba(255, 170, 0, 0.6);\n animation: nodePulse 1.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;\n}\n\n/* Thread styles */\n.thread {\n position: absolute;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 170, 0, 0.8),\n transparent\n );\n box-shadow: 0 0 10px rgba(255, 170, 0, 0.5);\n transform-origin: center;\n}\n\n/* Thread positioning and animations */\n.t1 {\n width: 100%;\n height: 2px;\n top: 30%;\n left: 0;\n animation: weave1 2s cubic-bezier(0.45, 0, 0.55, 1) infinite;\n}\n\n.t2 {\n width: 2px;\n height: 100%;\n top: 0;\n left: 70%;\n animation: weave2 2.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;\n}\n\n.t3 {\n width: 100%;\n height: 2px;\n bottom: 30%;\n left: 0;\n animation: weave3 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;\n}\n\n.t4 {\n width: 2px;\n height: 100%;\n top: 0;\n left: 30%;\n animation: weave4 2.6s cubic-bezier(0.36, 0, 0.66, -0.56) infinite;\n}\n\n/* Node pulse animation */\n@keyframes nodePulse {\n 0%,\n 100% {\n transform: translate(-50%, -50%) scale(1);\n box-shadow:\n 0 0 20px #ffaa00,\n 0 0 40px rgba(255, 170, 0, 0.6);\n }\n 50% {\n transform: translate(-50%, -50%) scale(1.4);\n box-shadow:\n 0 0 30px #ffaa00,\n 0 0 60px rgba(255, 170, 0, 0.8);\n }\n}\n\n/* Thread weave animations */\n@keyframes weave1 {\n 0% {\n transform: translateY(0) rotateX(0deg) rotateZ(0deg);\n opacity: 0.8;\n }\n 50% {\n transform: translateY(40px) rotateX(60deg) rotateZ(20deg);\n opacity: 1;\n }\n 100% {\n transform: translateY(0) rotateX(0deg) rotateZ(0deg);\n opacity: 0.8;\n }\n}\n\n@keyframes weave2 {\n 0% {\n transform: translateX(0) rotateY(0deg) rotateZ(0deg);\n opacity: 0.8;\n }\n 50% {\n transform: translateX(-40px) rotateY(60deg) rotateZ(-20deg);\n opacity: 1;\n }\n 100% {\n transform: translateX(0) rotateY(0deg) rotateZ(0deg);\n opacity: 0.8;\n }\n}\n\n@keyframes weave3 {\n 0% {\n transform: translateY(0) rotateX(0deg) rotateZ(0deg);\n opacity: 0.8;\n }\n 50% {\n transform: translateY(-40px) rotateX(-60deg) rotateZ(15deg);\n opacity: 1;\n }\n 100% {\n transform: translateY(0) rotateX(0deg) rotateZ(0deg);\n opacity: 0.8;\n }\n}\n\n@keyframes weave4 {\n 0% {\n transform: translateX(0) rotateY(0deg) rotateZ(0deg);\n opacity: 0.8;\n }\n 50% {\n transform: translateX(40px) rotateY(-60deg) rotateZ(-15deg);\n opacity: 1;\n }\n 100% {\n transform: translateX(0) rotateY(0deg) rotateZ(0deg);\n opacity: 0.8;\n }\n}\n"}

breezy-elephant-31

👁 实时预览

📝 源代码