{"html":"\n\n\n","css":".button {\n text-align: center;\n transition: 0.3s ease-in-out;\n cursor: pointer;\n background-color: transparent;\n filter: url(#handDrawnNoise);\n display: inline-flex;\n align-items: center;\n user-select: none;\n font-family: \"Courier New\", monospace;\n font-size: 1.5rem;\n font-weight: bold;\n padding: 1em;\n border-width: 0px;\n border-radius: 2rem;\n box-shadow: #33333366 4px 4px 0 1px;\n animation: idle 1s infinite ease-in-out;\n}\n\n.highlight {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n fill: rgba(255, 225, 0, 0.5);\n stroke: rgba(255, 225, 0, 0.5); /* Yellow highlighter */\n stroke-width: 10;\n stroke-linecap: round;\n pointer-events: none;\n stroke-dasharray: 1000;\n stroke-dashoffset: 1000;\n transition: stroke-dashoffset 0.5s ease-in-out;\n}\n\n@keyframes idle {\n 0% {\n filter: url(#handDrawnNoise);\n }\n 50% {\n rotate: 2.5deg;\n filter: url(#handDrawnNoise2);\n }\n 100% {\n filter: url(#handDrawnNoise);\n }\n}\n\n.button-cosm {\n fill: #33333366;\n transition: 0.3s ease-out;\n scale: 0.5;\n position: absolute;\n translate: calc(-100% + 24px) 1.5rem;\n}\n\n.button:hover {\n font-weight: bold;\n border-width: 0px;\n border-radius: 2rem;\n}\n\n.button:hover {\n font-weight: bold;\n border-width: 0px;\n border-radius: 2rem;\n rotate: -2.5deg;\n animation: hover 2.5s infinite ease-in-out;\n}\n\n.button:hover .highlight {\n stroke-dashoffset: 0;\n}\n\n.button:active .highlight {\n stroke-dashoffset: 1000;\n animation:\n highlight 5s infinite,\n col 0.5s forwards;\n stroke: #bc4e2666;\n}\n\n@keyframes col {\n 0% {\n stroke: rgba(255, 225, 0, 0.5);\n }\n 100% {\n stroke: #1c98eb66;\n }\n}\n\n@keyframes highlight {\n 0% {\n stroke-dashoffset: 0;\n }\n 25% {\n stroke-dashoffset: 1000;\n }\n 50% {\n stroke-dashoffset: 1000;\n }\n 100% {\n stroke-dashoffset: 0;\n }\n}\n\n@keyframes hover {\n 0% {\n rotate: 0deg;\n filter: url(#handDrawnNoise);\n translate: 0 0px;\n }\n 25% {\n rotate: -1deg;\n filter: url(#handDrawnNoise2);\n translate: 0 -2px;\n }\n 50% {\n rotate: 0deg;\n filter: url(#handDrawnNoise);\n translate: 0 2px;\n }\n 75% {\n rotate: -1deg;\n filter: url(#handDrawnNoise2);\n translate: 0 -2px;\n }\n 100% {\n rotate: 0deg;\n filter: url(#handDrawnNoise);\n translate: 0 0px;\n }\n}\n\n.button:hover .button-cosm {\n rotate: -15deg;\n translate: calc(-100% + 22px) 1.9rem;\n}\n\n.button:active .button-cosm {\n fill: #333333f1;\n rotate: -135deg;\n translate: calc(-100% + 55px) 1.6rem;\n animation: none;\n}\n\n.button:active {\n font-weight: bold;\n border-width: 0px;\n border-radius: 2rem;\n box-shadow: inset #333333f1 4px 4px 0 1px;\n rotate: -2.5deg;\n animation: active 1s infinite ease-in-out;\n}\n\n@keyframes active {\n 0% {\n filter: url(#handDrawnNoiset);\n translate: 0 -1px;\n }\n 25% {\n rotate: -3deg;\n }\n 50% {\n filter: url(#handDrawnNoiset2);\n translate: 0 1px;\n }\n 66% {\n rotate: 1.5deg;\n }\n 100% {\n filter: url(#handDrawnNoiset);\n translate: 0 -1px;\n }\n}\n"}

brown-baboon-8

👁 实时预览

📝 源代码