{"html":"\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n","css":".switch__input {\n color: #1c1717;\n font: 1em/1.5 sans-serif;\n transition:\n background-color 0.4s,\n color 0.4s;\n}\n\n.switch,\n.switch__input {\n -webkit-tap-highlight-color: transparent;\n}\n.switch {\n display: flex;\n align-items: center;\n margin: auto;\n}\n.switch__input {\n background: #a72828;\n border-radius: 50px;\n box-shadow:\n inset 0 1px 1px 1px rgba(0, 0, 0, 0.5),\n 0 1px 0 0 rgba(255, 255, 255, 0.1);\n outline: none;\n position: relative;\n width: 70px;\n height: 40px;\n transition:\n background-color 0.4s cubic-bezier(0.65, 0, 0.35, 1),\n box-shadow 0.2s ease,\n transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n -webkit-appearance: none;\n appearance: none;\n}\n\n.switch__input:before {\n background-color: #e8e3e3;\n border-radius: 50%;\n content: \"\";\n display: block;\n position: absolute;\n top: 8px;\n left: 8px;\n transition:\n background-color 0.4s,\n transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n width: 25px;\n height: 25px;\n}\n.switch__letters,\n.switch__letter {\n transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n}\n.switch__letters {\n margin-left: 8px;\n overflow: visible;\n pointer-events: none;\n width: 1.5em;\n height: 1.5em;\n font-size: 34px;\n}\n.switch__letter:last-child {\n transform: translateX(14px);\n}\n.switch__letter-stroke {\n stroke: #a72828;\n transition:\n stroke 0.4s cubic-bezier(0.65, 0, 0.35, 1),\n stroke-dashoffset 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6),\n transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n}\n.switch__letter-stroke:nth-child(2) {\n transform-origin: 2px 2px;\n}\n.switch__text {\n overflow: hidden;\n position: absolute;\n width: 1px;\n height: 1px;\n}\n/* “on” state */\n.switch__input:checked {\n background-color: #1fad3e;\n}\n.switch__input:checked,\n.switch__input:checked + .switch__letters {\n transform: translateX(0.375em);\n}\n.switch__input:checked:before {\n transform: translateX(30px);\n}\n.switch__input:checked ~ .switch__letters .switch__letter-stroke {\n stroke: #1fad3e;\n}\n.switch__input:checked ~ .switch__letters .switch__letter-stroke:nth-child(2) {\n stroke-dashoffset: 6;\n}\n.switch__input:checked ~ .switch__letters .switch__letter-stroke:last-child {\n stroke-dashoffset: 4;\n}\n.switch__input:checked\n ~ .switch__letters\n .switch__letter:first-child\n .switch__letter-stroke:nth-child(2) {\n stroke-dashoffset: 0;\n transform: rotate(56.5deg);\n}\n.switch__input:checked ~ .switch__letters .switch__letter:last-child {\n stroke-dashoffset: 0;\n transform: translateX(8px);\n}\n"}

dangerous-grasshopper-61

👁 实时预览

📝 源代码