{"html":"\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 --mud: #8B4513;\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 background: linear-gradient(to bottom,skyblue 70%,var(--mud));\n transition: .4s;\n border-radius: 30px;\n border: 2px solid black;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n border-radius: 20px;\n left: 0.3em;\n bottom: 0.3em;\n transition: .4s;\n}\n\n.plant {\n position: absolute;\n bottom: 3px;\n right: -30px;\n z-index: 3;\n opacity: 0;\n}\n\n.seed {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n border-radius: 20px;\n left: 0.3em;\n bottom: 0.3em;\n transition: .4s;\n}\n\n.switch input:checked + .slider {\n background-color: #156829;\n}\n\n.switch input:focus + .slider {\n box-shadow: 0 0 1px #156829;\n}\n\n.switch input:checked + .slider:before,\n.switch input:checked + .slider .seed {\n transform: translateX(1.5em);\n}\n\n.switch input:checked + .slider .seed {\n opacity: 0;\n}\n\n.switch input:checked + .slider .plant {\n animation: zoomIn 0.5s forwards;\n}\n\n@keyframes zoomIn {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n}"}

sweet-warthog-93

👁 实时预览

📝 源代码