{"html":"

\n","css":".loader-container {\n position: relative;\n width: 150px;\n height: 150px;\n perspective: 800px;\n transform-style: preserve-3d;\n}\n\n.sphere-core {\n position: absolute;\n width: 60px;\n height: 60px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: radial-gradient(circle at 40% 40%, #00eaff, #0066ff);\n border-radius: 50%;\n box-shadow: 0 0 25px rgba(0, 234, 255, 0.5);\n animation: pulse 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n}\n\n.ring {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 2px solid rgba(0, 234, 255, 0.7);\n border-radius: 50%;\n box-shadow: 0 0 15px rgba(0, 234, 255, 0.3);\n transform-style: preserve-3d;\n}\n\n.ring-1 {\n animation: rotateX 2.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;\n}\n\n.ring-2 {\n animation: rotateY 2s cubic-bezier(0.55, 0, 0.45, 1) infinite;\n width: 120px;\n height: 120px;\n top: 15px;\n left: 15px;\n border-color: rgba(0, 234, 255, 0.5);\n}\n\n.ring-3 {\n animation: rotateXY 3s cubic-bezier(0.7, 0, 0.3, 1) infinite;\n width: 90px;\n height: 90px;\n top: 30px;\n left: 30px;\n border-color: rgba(0, 234, 255, 0.3);\n}\n\n@keyframes rotateX {\n 0% {\n transform: rotateX(0deg);\n }\n 50% {\n transform: rotateX(180deg);\n }\n 100% {\n transform: rotateX(360deg);\n }\n}\n\n@keyframes rotateY {\n 0% {\n transform: rotateY(0deg);\n }\n 50% {\n transform: rotateY(180deg);\n }\n 100% {\n transform: rotateY(360deg);\n }\n}\n\n@keyframes rotateXY {\n 0% {\n transform: rotateX(0deg) rotateY(0deg);\n }\n 50% {\n transform: rotateX(90deg) rotateY(180deg);\n }\n 100% {\n transform: rotateX(360deg) rotateY(360deg);\n }\n}\n\n@keyframes pulse {\n 0%,\n 100% {\n transform: translate(-50%, -50%) scale(1);\n box-shadow: 0 0 25px rgba(0, 234, 255, 0.5);\n }\n 50% {\n transform: translate(-50%, -50%) scale(1.1);\n box-shadow: 0 0 35px rgba(0, 234, 255, 0.7);\n }\n}\n\n.loader-container:hover .sphere-core {\n background: radial-gradient(circle at 40% 40%, #ff66ff, #6600ff);\n box-shadow: 0 0 35px rgba(255, 102, 255, 0.7);\n}\n\n.loader-container:hover .ring {\n border-color: rgba(255, 102, 255, 0.7);\n box-shadow: 0 0 20px rgba(255, 102, 255, 0.5);\n}\n"}

young-bat-62

👁 实时预览

📝 源代码