{"html":"\n \n

\n \n \n

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

\n\n","css":".custom-ui-switch,\n.custom-ui-switch *,\n.custom-ui-switch *:before,\n.custom-ui-switch *:after {\n box-sizing: border-box;\n transition: all 0.5s ease 0s;\n}\n\n.custom-ui-switch {\n position: relative;\n width: 27vmin;\n height: 9vmin;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: Arial, Helvetica, sans-serif;\n cursor: pointer;\n margin-top: 5.4vmin;\n\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.custom-ui-switch input[type=\"checkbox\"] {\n display: none;\n}\n\n.custom-ui-switch .switch-body {\n position: absolute;\n width: 100%;\n height: 100%;\n background: #616774;\n border-radius: 4.5vmin;\n box-shadow:\n 0 0 0.09vmin 0.09vmin #0006,\n 0 -4px 0.45vmin 0.009vmin #000d,\n 0 0px 0.45vmin 0.09vmin #fff8,\n 0 -4px 0.9vmin 0.09vmin #000c;\n}\n\n.custom-ui-switch .track {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 4.5vmin;\n overflow: hidden;\n background: #191e1e;\n box-shadow: 0 1.5vmin 2.25vmin 0 #000 inset;\n}\n\n.custom-ui-switch .thumb {\n position: absolute;\n width: 8.1vmin;\n height: 8.1vmin;\n top: 0.4725vmin;\n left: 0.495vmin;\n background: linear-gradient(180deg, #3f4447, #262727);\n border-radius: 4.5vmin;\n box-shadow:\n -0.18vmin 0.18vmin 0.15vmin 0 #fff2 inset,\n 0 0 0.45vmin 0.09vmin #000c;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n overflow: hidden;\n}\n\n.custom-ui-switch input[type=\"checkbox\"]:checked ~ .switch-body .thumb {\n left: calc(100% - 8.5928vmin);\n}\n\n.custom-ui-switch .thumb:before {\n content: \"\";\n position: absolute;\n background: #2c3133;\n width: 0.375vmin;\n height: 3.333vmin;\n border-radius: 4.5vmin;\n box-shadow:\n 0.9vmin 0 0 0 #2c3133,\n -0.9vmin 0 0 0 #2c3133;\n filter: drop-shadow(0px 1px 2px #000) drop-shadow(0px -1px 0px #fff4)\n blur(0.65px);\n}\n\n.custom-ui-switch .thumb:after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 4.5vmin;\n animation: shine-thumb-off 0.5s ease 0s 1 forwards;\n}\n\n.custom-ui-switch input[type=\"checkbox\"]:checked ~ .switch-body .thumb:after {\n animation: shine-thumb-on 0.5s ease 0s 1 forwards;\n}\n\n@keyframes shine-thumb-on {\n 0% {\n background: radial-gradient(circle at 50% 55%, #fff0 4vmin, #f50000 5vmin);\n }\n 50% {\n background: radial-gradient(circle at 50% 55%, #fff0 4vmin, #666666 5vmin);\n }\n 100% {\n background: radial-gradient(circle at 50% 55%, #fff0 4vmin, #4caf50 5vmin);\n }\n}\n\n@keyframes shine-thumb-off {\n 0% {\n background: radial-gradient(circle at 50% 55%, #fff0 4vmin, #4caf50 5vmin);\n }\n 50% {\n background: radial-gradient(circle at 50% 55%, #fff0 4vmin, #666666 5vmin);\n }\n 100% {\n background: radial-gradient(circle at 50% 55%, #fff0 4vmin, #f50000 5vmin);\n }\n}\n\n.custom-ui-switch .track-top,\n.custom-ui-switch .track-bot {\n position: absolute;\n width: 120%;\n height: 2vmin;\n left: -10%;\n top: -1.8vmin;\n transform-origin: 22% 100%;\n transform: rotate(5deg);\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n opacity: 0.85;\n animation: t-top-l 0.5s ease 0s 1 reverse forwards;\n}\n\n.custom-ui-switch .track span span {\n background: linear-gradient(0deg, #fff8, #fff0),\n linear-gradient(180deg, #222, #666);\n width: 2.8125vmin;\n height: 2.25vmin;\n display: inline-flex;\n border-radius: 0 0 0.5625vmin 0.5625vmin;\n box-shadow: 0 0 1px 0 #fff;\n}\n\n.custom-ui-switch .track-bot span {\n background: linear-gradient(180deg, #fff8, #fff0),\n linear-gradient(0deg, #222, #666) !important;\n border-radius: 0.5625vmin 0.5625vmin 0 0 !important;\n}\n\n.custom-ui-switch .track-bot {\n top: inherit;\n bottom: -2vmin;\n transform: rotate(-5deg);\n animation: t-bot-l 0.5s ease 0s 1 reverse forwards;\n}\n\n.custom-ui-switch\n input[type=\"checkbox\"]:checked\n ~ .switch-body\n .track\n .track-top {\n animation: t-top-r 0.5s ease 0s 1 forwards;\n}\n\n@keyframes t-top-r {\n 0% {\n transform: rotate(5deg);\n transform-origin: 22% 100%;\n }\n 50% {\n transform: rotate(0deg);\n transform-origin: 22% 100%;\n }\n 50.01% {\n transform: rotate(0deg);\n transform-origin: 78% 100%;\n }\n 100% {\n transform: rotate(-5deg);\n transform-origin: 78% 100%;\n }\n}\n@keyframes t-top-l {\n 0% {\n transform: rotate(5deg);\n transform-origin: 22% 100%;\n }\n 50% {\n transform: rotate(0deg);\n transform-origin: 22% 100%;\n }\n 50.01% {\n transform: rotate(0deg);\n transform-origin: 78% 100%;\n }\n 100% {\n transform: rotate(-5deg);\n transform-origin: 78% 100%;\n }\n}\n\n.custom-ui-switch\n input[type=\"checkbox\"]:checked\n ~ .switch-body\n .track\n .track-bot {\n animation: t-bot-r 0.5s ease 0s 1 forwards;\n}\n\n@keyframes t-bot-r {\n 0% {\n transform: rotate(-5deg);\n transform-origin: 22% 100%;\n }\n 50% {\n transform: rotate(0deg);\n transform-origin: 22% 100%;\n }\n 50.01% {\n transform: rotate(0deg);\n transform-origin: 78% 100%;\n }\n 100% {\n transform: rotate(5deg);\n transform-origin: 78% 100%;\n }\n}\n@keyframes t-bot-l {\n 0% {\n transform: rotate(-5deg);\n transform-origin: 22% 100%;\n }\n 50% {\n transform: rotate(0deg);\n transform-origin: 22% 100%;\n }\n 50.01% {\n transform: rotate(0deg);\n transform-origin: 78% 100%;\n }\n 100% {\n transform: rotate(5deg);\n transform-origin: 78% 100%;\n }\n}\n\n.custom-ui-switch .lights {\n position: absolute;\n width: 100%;\n height: 2.571vmin;\n top: -5.4vmin;\n display: flex;\n justify-content: space-between;\n padding: 0 3vmin;\n z-index: 1;\n pointer-events: none;\n}\n\n.custom-ui-switch .lights span {\n background: #121212;\n position: relative;\n width: 2.571vmin;\n height: 2.571vmin;\n border-radius: 4.5vmin;\n box-shadow:\n 0 0px 0.09vmin 0.09vmin #0008,\n 0 -4px 0.45vmin 0.009vmin #000,\n 0 2px 0.45vmin 0.009vmin #fff8,\n 0 0px 0.225vmin 0.36vmin #000;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.custom-ui-switch .lights span:before {\n content: \"off\";\n font-size: 1.875vmin;\n text-align: center;\n width: 200%;\n position: absolute;\n top: -3.103vmin;\n left: -50%;\n color: #ffffff3d;\n text-shadow:\n 0px -2px 2px #0008,\n 0px 1px 2px #fff4;\n background: -webkit-linear-gradient(90deg, #0000003b 25%, #f50000 75%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: #71717170;\n}\n\n.custom-ui-switch .lights span + span:before {\n content: \"on\";\n}\n\n.custom-ui-switch .lights span:after {\n content: \"\";\n color: #fff;\n width: calc(100% - 0.3vmin);\n height: calc(100% - 0.3vmin);\n position: absolute;\n border-radius: 4.5vmin;\n box-shadow:\n 0 0px 0.09vmin 0.09vmin #0008 inset,\n 0 -4px 0.45vmin 0.009vmin #000 inset,\n 0 2px 0.45vmin 0.009vmin #fff8 inset,\n 0 0px 0.225vmin 0.18vmin #000 inset;\n}\n\n.custom-ui-switch .light-off:after {\n box-shadow:\n 0 0 1.8vmin 0 #f50000,\n 0 0 1.5vmin 0.225vmin #f50000 inset,\n 0 -0.225vmin 0.45vmin 0.45vmin #000 inset;\n background: radial-gradient(\n circle at 50% 32%,\n #fff 0 0.225vmin,\n #fff8 1.5vmin 1.5vmin\n );\n}\n\n.custom-ui-switch input[type=\"checkbox\"]:checked ~ .lights .light-off:after {\n box-shadow:\n 0 0 1.5vmin 0 #f5000020,\n 0 0 1.5vmin 0.225vmin #f5000020 inset;\n background: radial-gradient(\n circle at 50% 32%,\n #fff5 0 0.225vmin,\n #000 1.5vmin 1.5vmin\n );\n}\n\n.custom-ui-switch .light-on:after {\n box-shadow:\n 0 0 1.5vmin 0 #00f56d20,\n 0 0 1.5vmin 0.225vmin #00f56d20 inset;\n background: radial-gradient(\n circle at 50% 32%,\n #fff5 0 0.225vmin,\n #000 1.5vmin 1.5vmin\n );\n}\n\n.custom-ui-switch input[type=\"checkbox\"]:checked ~ .lights .light-on:after {\n box-shadow:\n 0 0 1.8vmin 0 #4caf50,\n 0 0 1.5vmin 0.225vmin #4caf50 inset,\n 0 -0.225vmin 0.45vmin 0.45vmin #000 inset;\n background: radial-gradient(\n circle at 50% 32%,\n #fff 0 0.225vmin,\n #fff2 1.5vmin 1.5vmin\n );\n}\n"}

big-wasp-54

👁 实时预览

📝 源代码