{"html":"","css":"button {\n --color2: #ff206e;\n padding: 15px 30px;\n border-radius: 18px;\n border: 1px solid #282828;\n background-color: #212121;\n box-shadow: inset 2px 2px 5px rgb(22, 22, 22);\n position: relative;\n overflow: hidden;\n}\n\nbutton::after {\n content: '';\n height: 30px;\n width: 60px;\n position: absolute;\n box-shadow: 0 0 20px 10px var(--color2);\n bottom: -45px;\n left: 21%;\n transition: 0.4s 0.3s;\n}\n\nbutton svg {\n --move2: inset(31% 0 40% 0);\n --move3: inset(39% 0 15% 0);\n --move4: inset(45% 0 40% 0);\n --move5: inset(45% 0 6% 0);\n --move6: inset(14% 0 61% 0);\n --move7: inset(0 0 0 0);\n clip-path: inset(50% 50% 50% 50%);\n margin-left: 5px;\n transition: 0.4s;\n}\n\nbutton:hover svg {\n clip-path: var(--move7);\n animation: glitch_4011 0.4s;\n animation-timing-function: steps(2, end);\n}\n\nbutton:hover:after {\n bottom: -40px;\n width: 100px;\n}\n\nbutton .icon_shadow {\n display: flex;\n align-items: center;\n transition: 0.4s;\n color: var(--color2);\n font-weight: bold;\n filter: drop-shadow(0 0 10px var(--color2));\n}\n\nbutton:hover .icon_shadow {\n filter: drop-shadow(0 0 10px var(--color2));\n}\n\n@keyframes glitch_4011 {\n 0% {\n clip-path: var(--move1);\n transform: translate(0px,-10px);\n }\n\n 10% {\n clip-path: var(--move2);\n transform: translate(-10px,10px);\n }\n\n 20% {\n clip-path: var(--move3);\n transform: translate(10px,0px);\n }\n\n 30% {\n clip-path: var(--move4);\n transform: translate(-10px,10px);\n }\n\n 40% {\n clip-path: var(--move5);\n transform: translate(10px,-10px);\n }\n\n 50% {\n clip-path: var(--move6);\n transform: translate(-10px,10px);\n }\n\n 60% {\n clip-path: var(--move1);\n transform: translate(10px,-10px);\n }\n\n 70% {\n clip-path: var(--move3);\n transform: translate(-10px,10px);\n }\n\n 80% {\n clip-path: var(--move2);\n transform: translate(10px,-10px);\n }\n\n 90% {\n clip-path: var(--move4);\n transform: translate(-10px,10px);\n }\n\n 100% {\n transform: translate(0);\n }\n}\n"}

strange-bat-74

👁 实时预览

📝 源代码