{"html":"\n \n

\n \n \n \n

\n","css":".switch input {\n display: none;\n}\n\n.button {\n position: relative;\n background-image: linear-gradient(#ffffff 33%,#414751 58%,#837b52,#c5baa1,#c3adaa);\n border-radius: 50px;\n padding: 6px;\n border: none;\n outline: none;\n box-shadow: 0.1em 0 0 #2726267f inset, -0.1em 0 0 #27262600 inset, 0 0.1em 0 #afa490 inset, 0 -0.1em 0 #ffffff3f, 0 0.2em 0.5em #0000007f, 0 -0.1em 0 #151616 inset, -0.1em -0.2em 0 #ffffff7f inset;\n cursor: pointer;\n width: 4rem;\n height: 4rem;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: .3s ease-in-out;\n}\n\n.button::before {\n position: absolute;\n content: \"\";\n width: 4.1rem;\n height: 4.1rem;\n border-radius: inherit;\n background-color: #606060;\n z-index: -1;\n transition: background-image .3s ease-in-out;\n}\n\n.button .icon {\n width: 4rem;\n height: 4rem;\n display: inline-block;\n}\n\n.button .icon svg {\n height: 100%;\n width: 100%;\n fill: #000000;\n transition: fill;\n}\n\n.switch input:checked + .button::before {\n background-image: rgb(77, 124, 255);\n animation: anime1 .3s linear alternate-reverse infinite;\n}\n\n.switch input:checked + .button {\n box-shadow: none;\n}\n\n.switch input:checked + .button .icon svg {\n fill: rgb(77, 124, 255);\n animation: anime2 .3s linear alternate-reverse infinite;\n}\n\n@keyframes anime1 {\n to {\n background-color: rgb(77, 124, 255);\n }\n}\n\n@keyframes anime2 {\n to {\n fill: rgba(77, 124, 255, 0.642);\n }\n}"}

cold-insect-20

👁 实时预览

📝 源代码