{"html":"\n \n \n

\n \n \n \n \n

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n\n","css":"/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 2em;\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 padding-top: 5px;\n background-color: rgb(199, 219, 215);\n transition: 0.4s;\n border-radius: 30px;\n box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);\n border: 1px solid #fff;\n}\n\n.slider .fug .nav {\n position: absolute;\n height: 1.4em;\n width: 1.5em;\n left: 0.3em;\n bottom: 0.3em;\n transition: 0.4s;\n z-index: 10;\n transform: rotate(45deg);\n fill: #fff;\n}\n\n.switch input:checked + .slider {\n background-color: #2b4360;\n}\n\n.switch input:focus + .slider {\n box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);\n}\n\n.switch input:checked + .slider .fug .nav {\n transition: 0.4s;\n transform: translateX(1.3em) rotate(45deg);\n padding: 3px;\n animation: 4s nav linear infinite;\n}\n\n@keyframes nav {\n 0% {\n transform: translateX(1.3em) rotate(45deg);\n }\n 10% {\n transform: translateX(1.1em) rotate(45deg);\n }\n 30% {\n transform: translateX(1.2em) rotate(45deg);\n }\n 50% {\n transform: translateX(1em) rotate(45deg);\n }\n 70% {\n transform: translateX(1.2em) rotate(45deg);\n }\n 80% {\n transform: translateX(1em) rotate(45deg);\n }\n 90% {\n transform: translateX(1.2em) rotate(45deg);\n }\n 100% {\n transform: translateX(1.3em) rotate(45deg);\n }\n}\n\n.star {\n opacity: 0;\n transition: 0.2s linear;\n}\n\n.switch input:checked + .slider .star {\n opacity: 1;\n transition: 0.2s linear;\n animation: 2s piscar linear infinite;\n}\n\n.star:nth-last-child(1) {\n position: absolute;\n top: 7px;\n left: 13px;\n}\n.star:nth-last-child(2) {\n position: absolute;\n top: 14px;\n left: 19px;\n}\n.star:nth-last-child(3) {\n position: absolute;\n top: 18px;\n left: 9px;\n}\n.star:nth-last-child(4) {\n position: absolute;\n top: 23px;\n left: 24px;\n}\n\n@keyframes piscar {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n"}

massive-snail-12

👁 实时预览

📝 源代码