{"html":"\n \n

\n \n \n

\n\n","css":".water-toggle {\n display: inline-block;\n position: relative;\n}\n\n.water-toggle input#toggle-wave {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n cursor: pointer;\n z-index: 3;\n}\n\n.container {\n position: relative;\n z-index: 1;\n filter: url(#still-water);\n animation: wave 10s infinite ease-in-out;\n transition: 1s;\n display: block;\n}\n\n.water-toggle:hover .container {\n filter: url(#water-rotate);\n transition: 0.5s;\n animation: wave 8s infinite ease-in-out;\n}\n\ninput#toggle-wave:checked ~ .container {\n animation: beeg-wave 3.5s infinite ease-in-out;\n scale: 0.75;\n}\n\n.water-button {\n position: relative;\n z-index: 5;\n font-size: 1.5rem;\n padding: 1em 2em;\n border: none;\n border-radius: 50em;\n background: #50626b22;\n outline: 3px solid #3f545f33;\n color: #d1d7e48b;\n text-shadow: 0px 0px 8px #79a5adda;\n font-weight: bold;\n backdrop-filter: url(#water) blur(0.4rem);\n cursor: pointer;\n font-family: Tahoma, sans-serif;\n translate: 10px;\n transition: 1s;\n box-shadow: inset 2px 3px 4px #d4f7fe25;\n}\n\n.water-toggle:hover .water-button {\n text-shadow: 0px 0px 12px #49e1ffda;\n background: #13b0ff3d;\n outline-color: #00aaff00;\n padding: 2em;\n box-shadow:\n inset 0px 0px 8px #7ae9ff25,\n 0px 0px 64px #39d9f96f;\n}\n\ninput#toggle-wave:checked ~ .container .water-button {\n text-shadow:\n 0px 0px 48px #7ae9ff,\n 0px 0px 12px #7ae9ff,\n 0px 0px 12px #7ae9ff,\n 0px 0px 64px #39d9f9;\n box-shadow:\n inset 0px 0px 12px #7ae9ff46,\n inset 0px 0px 8px #7ae9ff25,\n 0px 0px 8px #7ae9ff84,\n 0px 0px 64px #39d9f96f;\n padding: 20% 2em;\n transition: 1s;\n}\n\n/* animations */\n@keyframes wave {\n 0% {\n padding: 1rem;\n }\n 50% {\n padding: 10rem;\n }\n 100% {\n padding: 1rem;\n }\n}\n\n@keyframes beeg-wave {\n 0% {\n padding: 1rem;\n }\n 50% {\n padding: 12rem;\n }\n 100% {\n padding: 1rem;\n }\n}\n"}

horrible-starfish-68

👁 实时预览

📝 源代码