{"html":"

\n \n \n +\n

\n \n \n –\n

\n","css":".container {\n text-align: center;\n position: absolute;\n margin-top: -80px;\n top: 50%;\n transform: scale(0.9);\n display: flex;\n}\n\n.toggle {\n margin: 4px;\n display: inline-block;\n}\n\n.toggle {\n box-shadow:\n inset 0 0 35px 5px rgba(0, 0, 0, 0.25),\n inset 0 2px 1px 1px rgba(255, 255, 255, 0.9),\n inset 0 -2px 1px 0 rgba(0, 0, 0, 0.25);\n border-radius: 8px;\n background: #ccd0d4;\n position: relative;\n height: 140px;\n width: 140px;\n}\n.toggle:before {\n box-shadow: 0 0 17.5px 8.75px #fff;\n border-radius: 118.3px;\n background: #fff;\n position: absolute;\n margin-left: -50.4px;\n margin-top: -50.4px;\n opacity: 0.2;\n content: \"\";\n height: 100.8px;\n width: 100.8px;\n left: 50%;\n top: 50%;\n}\n.toggle .button {\n -webkit-filter: blur(1px);\n -moz-filter: blur(1px);\n filter: blur(1px);\n transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);\n box-shadow:\n 0 15px 25px -4px rgba(0, 0, 0, 0.5),\n inset 0 -3px 4px -1px rgba(0, 0, 0, 0.2),\n 0 -10px 15px -1px rgba(255, 255, 255, 0.6),\n inset 0 3px 4px -1px rgba(255, 255, 255, 0.2),\n inset 0 0 5px 1px rgba(255, 255, 255, 0.8),\n inset 0 20px 30px 0 rgba(255, 255, 255, 0.2);\n border-radius: 96.32px;\n position: absolute;\n background: #ccd0d4;\n margin-left: -48.16px;\n margin-top: -48.16px;\n display: block;\n height: 96.32px;\n width: 96.32px;\n left: 50%;\n top: 50%;\n}\n.toggle .label {\n transition: color 300ms ease-out;\n text-shadow:\n 1px 1px 3px #ccd0d4,\n 0 0 0 rgba(0, 0, 0, 0.8),\n 1px 1px 4px #fff;\n line-height: 139px;\n text-align: center;\n position: absolute;\n font-weight: 700;\n font-size: 42px;\n display: block;\n opacity: 0.9;\n height: 100%;\n width: 100%;\n color: rgba(0, 0, 0, 0.4);\n}\n.toggle input {\n opacity: 0;\n position: absolute;\n cursor: pointer;\n z-index: 1;\n height: 100%;\n width: 100%;\n left: 0;\n top: 0;\n}\n.toggle input:active ~ .button {\n box-shadow:\n 0 15px 25px -4px rgba(0, 0, 0, 0.4),\n inset 0 -8px 30px 1px rgba(255, 255, 255, 0.9),\n 0 -10px 15px -1px rgba(255, 255, 255, 0.6),\n inset 0 8px 25px 0 rgba(0, 0, 0, 0.4),\n inset 0 0 10px 1px rgba(255, 255, 255, 0.6);\n}\n.toggle input:active ~ .label {\n font-size: 40px;\n color: rgba(0, 0, 0, 0.45);\n}\n.toggle input:checked ~ .button {\n box-shadow:\n 0 15px 25px -4px rgba(0, 0, 0, 0.4),\n inset 0 -8px 25px -1px rgba(255, 255, 255, 0.9),\n 0 -10px 15px -1px rgba(255, 255, 255, 0.6),\n inset 0 8px 20px 0 rgba(0, 0, 0, 0.2),\n inset 0 0 5px 1px rgba(255, 255, 255, 0.6);\n}\n.toggle input:checked ~ .label {\n font-size: 40px;\n color: rgba(0, 0, 0, 0.4);\n}\n"}

fast-puma-20

👁 实时预览

📝 源代码