{"html":"

\n \n \n \n Play\n \n \n \n \n \n \n \n \n \n

\n","css":".container {\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: Arial, Helvetica, sans-serif;\n color: #fff;\n}\n\n.switch {\n font-size: 0.875rem;\n position: relative;\n display: inline-block;\n width: 9em;\n height: 2.6em;\n}\n\n.switch input {\n display: none;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.switch input:checked + .slider .ball {\n box-shadow: 10px 10px 100px #7f8996;\n}\n\n.switch input:checked + .slider .title {\n left: 40%;\n}\n\n.switch input:checked + .slider {\n background-color: #8a5cd4;\n}\n\n.switch input:focus + .slider {\n box-shadow: 10px 10px 100px #7f8996;\n}\n\n.switch input:checked + .slider .ball {\n left: 72%;\n transform: rotate(360deg);\n box-shadow: none;\n outline: 6px solid rgba(255, 255, 255, 0.278);\n}\n\n.switch .slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #313033;\n transition: all 0.4s;\n border-radius: 30px;\n}\n\n.switch .slider .title {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-weight: 600;\n transition: all 0.4s;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.switch .slider .ball {\n background-color: #fff;\n height: 36px;\n width: 36px;\n border-radius: 50%;\n position: absolute;\n left: -1px;\n transition: 0.4s;\n}\n\n.switch .slider .ball .icon {\n position: absolute;\n top: 58%;\n left: 53%;\n transform: translate(-50%, -50%);\n color: #313033;\n font-size: 12px;\n}\n"}

warm-turtle-37

👁 实时预览

📝 源代码