{"html":"\n \n

\n","css":".switch {\n width: 100px;\n height: 45px;\n}\n\n.switch input {\n display: none;\n}\n\n.slider {\n cursor: pointer;\n position: relative;\n width: 100%;\n height: 100%;\n background-color: rgb(8, 8, 8);\n transition: all 0.4s cubic-bezier(0.99, 0.1, 0.1, 0.99);\n border-radius: 5px;\n box-shadow:\n inset 0px 0px 1px 0px rgba(0, 0, 0, 1),\n inset 90px 0px 50px -50px rgba(126, 4, 4, 0.56);\n border: 2px solid black;\n}\n\n.slider-btn {\n position: absolute;\n content: \"\";\n aspect-ratio: 6/4;\n border-radius: 3px;\n left: 2px;\n top: 2px;\n bottom: 2px;\n right: auto;\n background: linear-gradient(to bottom, #333333, #242323);\n border: 1px solid #2b2b2b;\n background-color: #333333;\n box-shadow:\n 0px 10px 5px 1px rgba(0, 0, 0, 0.15),\n inset 10px 0px 10px -5px rgba(126, 4, 4, 0.1);\n transition: all 0.4s cubic-bezier(0.99, 0.1, 0.1, 0.99);\n display: flex;\n align-items: center;\n justify-content: space-around;\n}\n\n.texture {\n width: 2px;\n height: 70%;\n background-color: #202020ea;\n box-shadow:\n -0.7px -1.5px 1px 0px rgba(192, 192, 192, 0.3),\n 0px 2px 3px rgb(0, 0, 0, 0.3);\n transition: 0.25s;\n}\n\n.light {\n width: 4px;\n height: 4px;\n border: 1px solid #222121;\n border-radius: 50%;\n transition: all 0.4s cubic-bezier(0.99, 0.1, 0.1, 0.99);\n background-color: rgb(230, 14, 14);\n box-shadow: 0px 0px 10px 1px rgb(241, 28, 28);\n}\n\n.switch input:checked + .slider {\n box-shadow:\n inset 0px 0px 1px 0px rgba(0, 0, 0, 1),\n inset -85px 0px 50px -50px rgba(1, 78, 4, 0.6);\n}\n\n.switch input:checked + .slider .slider-btn {\n transform: translateX(66%);\n box-shadow:\n 0px 10px 5px 1px rgba(0, 0, 0, 0.15),\n inset -10px 0px 10px -5px rgba(1, 112, 4, 0.1);\n}\n\n.switch input:checked + .slider .slider-btn .light {\n background-color: rgb(35, 158, 4);\n box-shadow: 0px 0px 10px 0px rgb(57, 230, 14);\n}\n"}

tall-panther-27

👁 实时预览

📝 源代码