{"html":"

\n \n

\n\n

\n \n

\n","css":".holographic-stack {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 30px;\n perspective: 1000px;\n}\n\n.holographic-icon {\n position: relative;\n width: 80px;\n height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n transform-style: preserve-3d;\n}\n\n.holographic-icon svg {\n width: 40px;\n height: 40px;\n position: relative;\n z-index: 3;\n transition: all 0.3s ease;\n filter: drop-shadow(0 0 5px currentColor);\n}\n\n.holographic-ring {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border: 2px solid;\n border-top-color: transparent;\n border-bottom-color: transparent;\n animation: rotate 3s linear infinite;\n opacity: 0.7;\n}\n\n.holographic-particles {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: radial-gradient(\n circle,\n transparent 20%,\n currentColor 20%,\n currentColor 30%,\n transparent 30%,\n transparent 40%,\n currentColor 40%,\n currentColor 50%,\n transparent 50%\n );\n background-size: 15px 15px;\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.holographic-pulse {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n box-shadow: 0 0 15px currentColor;\n opacity: 0;\n transition:\n opacity 0.3s ease,\n transform 0.3s ease;\n}\n\n.holographic-icon.github {\n color: #6e5494;\n}\n\n.holographic-icon.github:hover {\n color: #c9510c;\n transform: translateY(-10px) rotateX(20deg);\n}\n\n.holographic-icon.github:hover .holographic-ring {\n border-color: #c9510c;\n border-top-color: transparent;\n border-bottom-color: transparent;\n}\n\n.holographic-icon.instagram {\n color: #bc2a8d;\n}\n\n.holographic-icon.instagram:hover {\n color: linear-gradient(\n 90deg,\n rgba(2, 0, 36, 1) 0%,\n rgba(9, 9, 121, 1) 35%,\n rgba(0, 212, 255, 1) 100%\n );\n transform: translateY(-10px) rotateX(20deg);\n}\n\n.holographic-icon.instagram:hover .holographic-ring {\n border-color: linear-gradient(\n 90deg,\n rgba(2, 0, 36, 1) 0%,\n rgba(9, 9, 121, 1) 35%,\n rgba(0, 212, 255, 1) 100%\n );\n border-top-color: transparent;\n border-bottom-color: transparent;\n}\n\n.holographic-icon:hover {\n transform: translateY(-10px) rotateX(20deg);\n}\n\n.holographic-icon:hover svg {\n transform: scale(1.2) rotate(10deg);\n}\n\n.holographic-icon:hover .holographic-particles {\n opacity: 0.3;\n animation: particles 3s linear infinite;\n}\n\n.holographic-icon:hover .holographic-pulse {\n opacity: 0.5;\n animation: pulse 2s ease-out infinite;\n}\n\n@keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes particles {\n from {\n background-position: 0 0;\n }\n to {\n background-position: 30px 30px;\n }\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(0.8);\n opacity: 0.5;\n }\n 50% {\n transform: scale(1.1);\n opacity: 0.2;\n }\n 100% {\n transform: scale(1.3);\n opacity: 0;\n }\n}\n\n.holographic-icon::before {\n content: \"\";\n position: absolute;\n bottom: -10px;\n left: 5%;\n width: 90%;\n height: 20%;\n background: rgba(0, 0, 0, 0.3);\n border-radius: 50%;\n filter: blur(10px);\n transform: rotateX(80deg) translateZ(-20px);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.holographic-icon:hover::before {\n opacity: 0.5;\n}\n"}

bright-penguin-48

👁 实时预览

📝 源代码