{"html":"

\n \n

\n","css":".button-wrapper {\n position: relative;\n transform-style: preserve-3d;\n transition: transform 0.2s ease;\n padding: 40px;\n}\n\n.spiderverse-button {\n position: relative;\n padding: 15px 30px;\n font-size: 24px;\n font-weight: 900;\n border: none;\n border-radius: 50px;\n cursor: pointer;\n background: #fff;\n color: #000;\n text-transform: uppercase;\n letter-spacing: 3px;\n transform-style: preserve-3d;\n transition: all 0.15s ease;\n font-family: Arial, sans-serif;\n text-shadow:\n -1px -1px 0 #000,\n 1px -1px 0 #000,\n -1px 1px 0 #000,\n 1px 1px 0 #000;\n}\n\n.glitch-text {\n position: relative;\n display: inline-block;\n}\n\n.glitch-layers {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.glitch-layer {\n position: absolute;\n content: \"CLICK ME\";\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #fff;\n border-radius: 50px;\n opacity: 0;\n transition: all 0.15s ease;\n}\n\n.layer-1 {\n color: #0ff;\n transform-origin: center;\n}\n\n.layer-2 {\n color: #f0f;\n transform-origin: center;\n}\n\n.button-wrapper:hover .layer-1 {\n opacity: 1;\n animation: glitchLayer1 0.4s steps(2) infinite;\n}\n\n.button-wrapper:hover .layer-2 {\n opacity: 1;\n animation: glitchLayer2 0.4s steps(2) infinite;\n}\n\n.button-wrapper:hover .spiderverse-button {\n animation: buttonGlitch 0.3s steps(2) infinite;\n box-shadow:\n 0 0 20px rgba(255, 255, 255, 0.5),\n 0 0 30px rgba(0, 255, 255, 0.5),\n 0 0 40px rgba(255, 0, 255, 0.5);\n}\n\n.noise {\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: repeating-radial-gradient(\n circle at 50% 50%,\n transparent 0,\n rgba(0, 0, 0, 0.1) 1px,\n transparent 2px\n );\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.3s;\n animation: noise 0.2s steps(2) infinite;\n}\n\n.button-wrapper:hover .noise {\n opacity: 1;\n}\n\n@keyframes buttonGlitch {\n 0% {\n transform: translate(0) scale(1.1);\n }\n 25% {\n transform: translate(-10px, 5px) scale(1.15) skew(-5deg);\n }\n 50% {\n transform: translate(10px, -5px) scale(1.1) skew(5deg);\n }\n 75% {\n transform: translate(-15px, -5px) scale(1.05) skew(-3deg);\n }\n 100% {\n transform: translate(0) scale(1.1);\n }\n}\n\n@keyframes glitchLayer1 {\n 0% {\n transform: translate(-20px, -10px) scale(1.1) skew(-10deg);\n clip-path: polygon(0 20%, 100% 20%, 100% 50%, 0 50%);\n }\n 25% {\n transform: translate(20px, 10px) scale(1.2) skew(10deg);\n clip-path: polygon(0 30%, 100% 30%, 100% 60%, 0 60%);\n }\n 50% {\n transform: translate(-15px, 5px) scale(0.9) skew(-5deg);\n clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);\n }\n 75% {\n transform: translate(15px, -5px) scale(1.3) skew(5deg);\n clip-path: polygon(0 40%, 100% 40%, 100% 70%, 0 70%);\n }\n 100% {\n transform: translate(-20px, -10px) scale(1.1) skew(-10deg);\n clip-path: polygon(0 20%, 100% 20%, 100% 50%, 0 50%);\n }\n}\n\n@keyframes glitchLayer2 {\n 0% {\n transform: translate(20px, 10px) scale(1.1) skew(10deg);\n clip-path: polygon(0 50%, 100% 50%, 100% 80%, 0 80%);\n }\n 25% {\n transform: translate(-20px, -10px) scale(1.2) skew(-10deg);\n clip-path: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);\n }\n 50% {\n transform: translate(15px, -5px) scale(0.9) skew(5deg);\n clip-path: polygon(0 40%, 100% 40%, 100% 70%, 0 70%);\n }\n 75% {\n transform: translate(-15px, 5px) scale(1.3) skew(-5deg);\n clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%);\n }\n 100% {\n transform: translate(20px, 10px) scale(1.1) skew(10deg);\n clip-path: polygon(0 50%, 100% 50%, 100% 80%, 0 80%);\n }\n}\n\n@keyframes noise {\n 0% {\n transform: translate(0, 0);\n }\n 10% {\n transform: translate(-5%, -5%);\n }\n 20% {\n transform: translate(10%, 5%);\n }\n 30% {\n transform: translate(-5%, 10%);\n }\n 40% {\n transform: translate(15%, -5%);\n }\n 50% {\n transform: translate(-10%, 15%);\n }\n 60% {\n transform: translate(5%, -10%);\n }\n 70% {\n transform: translate(-15%, 5%);\n }\n 80% {\n transform: translate(10%, 10%);\n }\n 90% {\n transform: translate(-5%, 15%);\n }\n 100% {\n transform: translate(0, 0);\n }\n}\n\n.glitch-slice {\n position: absolute;\n width: 120%;\n height: 5px;\n background: #fff;\n opacity: 0;\n animation: slice 3s linear infinite;\n}\n\n@keyframes slice {\n 0% {\n top: -10%;\n opacity: 0;\n }\n 1% {\n opacity: 0.5;\n }\n 3% {\n opacity: 0;\n }\n 50% {\n top: 110%;\n }\n 100% {\n top: 110%;\n }\n}\n"}

clever-swan-13

👁 实时预览

📝 源代码