{"html":"

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

\n","css":"/* I am not the orginal creator */\n.toggleWrapper {\n position: absolute;\n top: 50%;\n left: 50%;\n overflow: hidden;\n padding: 0 200px;\n transform: translate3d(-50%, -50%, 0);\n color: white;\n}\n\n.toggleWrapper .input {\n position: absolute;\n left: -99em;\n}\n\n.toggle {\n cursor: pointer;\n display: inline-block;\n position: relative;\n width: 90px;\n height: 50px;\n background-color: #83d8ff;\n border-radius: 84px;\n transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);\n}\n\n.toggle:before {\n content: \"AM\";\n position: absolute;\n left: -50px;\n top: 15px;\n font-size: 18px;\n color: #749ed7;\n}\n\n.toggle:after {\n content: \"PM\";\n position: absolute;\n right: -48px;\n top: 15px;\n font-size: 18px;\n}\n\n.toggle__handler {\n display: inline-block;\n position: relative;\n z-index: 1;\n top: 3px;\n left: 3px;\n width: 44px;\n height: 44px;\n background-color: #ffcf96;\n border-radius: 50px;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);\n transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);\n transform: rotate(-45deg);\n}\n\n.toggle__handler .crater {\n position: absolute;\n background-color: #e8cda5;\n opacity: 0;\n transition: opacity 200ms ease-in-out;\n border-radius: 100%;\n}\n\n.toggle__handler .crater--1 {\n top: 18px;\n left: 10px;\n width: 4px;\n height: 4px;\n}\n\n.toggle__handler .crater--2 {\n top: 28px;\n left: 22px;\n width: 6px;\n height: 6px;\n}\n\n.toggle__handler .crater--3 {\n top: 10px;\n left: 25px;\n width: 8px;\n height: 8px;\n}\n\n.star {\n position: absolute;\n background-color: #fff;\n transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);\n border-radius: 50%;\n}\n\n.star--1 {\n top: 10px;\n left: 35px;\n z-index: 0;\n width: 30px;\n height: 3px;\n}\n\n.star--2 {\n top: 18px;\n left: 28px;\n z-index: 1;\n width: 30px;\n height: 3px;\n}\n\n.star--3 {\n top: 27px;\n left: 40px;\n z-index: 0;\n width: 30px;\n height: 3px;\n}\n\n.star--4,\n.star--5,\n.star--6 {\n opacity: 0;\n transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);\n}\n\n.star--4 {\n top: 16px;\n left: 11px;\n z-index: 0;\n width: 2px;\n height: 2px;\n transform: translate3d(3px, 0, 0);\n}\n\n.star--5 {\n top: 32px;\n left: 17px;\n z-index: 0;\n width: 3px;\n height: 3px;\n transform: translate3d(3px, 0, 0);\n}\n\n.star--6 {\n top: 36px;\n left: 28px;\n z-index: 0;\n width: 2px;\n height: 2px;\n transform: translate3d(3px, 0, 0);\n}\n\n.input:checked + .toggle {\n background-color: #749dd6;\n}\n\n.input:checked + .toggle:before {\n color: #fff;\n}\n\n.input:checked + .toggle:after {\n color: #749ed7;\n}\n\n.input:checked + .toggle .toggle__handler {\n background-color: #ffe5b5;\n transform: translate3d(40px, 0, 0) rotate(0);\n}\n\n.input:checked + .toggle .toggle__handler .crater {\n opacity: 1;\n}\n\n.input:checked + .toggle .star--1 {\n width: 2px;\n height: 2px;\n}\n\n.input:checked + .toggle .star--2 {\n width: 4px;\n height: 4px;\n transform: translate3d(-5px, 0, 0);\n}\n\n.input:checked + .toggle .star--3 {\n width: 2px;\n height: 2px;\n transform: translate3d(-7px, 0, 0);\n}\n\n.input:checked + .toggle .star--4,\n.input:checked + .toggle .star--5,\n.input:checked + .toggle .star--6 {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n}\n\n.input:checked + .toggle .star--4 {\n transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);\n}\n\n.input:checked + .toggle .star--5 {\n transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);\n}\n\n.input:checked + .toggle .star--6 {\n transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);\n}\n"}

strong-lizard-79

👁 实时预览

📝 源代码