{"html":"\n \n \n \n \n \n","css":"/* The switch - the box around the slider */\n.switch {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3.8em;\n height: 3.8em;\n}\n\n.torch {\n margin-top: 0.9em;\n margin-left: 0.95em;\n width: 30px;\n height: 30px;\n transform: rotate(-45deg);\n}\n\n.slider .b {\n position: relative;\n top: -3.3em;\n transform: rotate(270deg);\n}\n\n.slider .bling_85 {\n stroke: #fff;\n stroke-width: 2.5;\n stroke-linecap: round;\n stroke-dasharray: 3;\n stroke-dashoffset: 15;\n transition: all 0.3s ease;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n transition: .4s;\n border-radius: 50%;\n background-color: rgba(116, 115, 115, 0.2);\n backdrop-filter: blur(5px);\n -webkit-backdrop-filter: blur(5px);\n border: 1px solid rgba(255, 255, 255, 0.3);\n}\n\n.chk_85:checked + .slider {\n animation: tap 0.3s linear forwards;\n}\n\n.chk_85:checked + .slider .bling_85 {\n animation: bling_8561328 0.3s linear forwards;\n animation-delay: 0.2s;\n}\n\n.chk_85:checked + .slider {\n background-color: #FFA133;\n}\n\n.chk_85:focus + .slider {\n box-shadow: 0 0 1px #FFA133;\n}\n\n@keyframes bling_8561328 {\n 50% {\n stroke-dasharray: 3;\n stroke-dashoffset: 12;\n }\n\n 100% {\n stroke-dasharray: 3;\n stroke-dashoffset: 9;\n }\n}\n\n@keyframes tap {\n 50% {\n scale: 0.9;\n }\n\n 100% {\n scale: 1;\n }\n}"}

nasty-seahorse-26

👁 实时预览

📝 源代码