{"html":"\n\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\n\n","css":".switch {\n display: inline-block;\n margin: 10em 2em;\n position: relative;\n border-radius: 3.5em;\n -webkit-box-shadow: 0 0 0.5em rgba(2,255,255,0.2);\n -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);\n box-shadow: 0 0 0.5em rgba(255,255,255,0.2);\n}\n\n.switch label {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n}\n\n.switch input {\n display: none;\n}\n\n.switch span {\n display: block;\n -webkit-transition: top 0.2s;\n -moz-transition: top 0.2s;\n -ms-transition: top 0.2s;\n -o-transition: top 0.2s;\n transition: top 0.2s;\n}\n\n.switch-border1 {\n border: 0.1em solid #000;\n border-radius: 3.5em;\n -webkit-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);\n -moz-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);\n box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);\n}\n\n.switch-border2 {\n width: 6.6em;\n height: 12.6em;\n position: relative;\n border: 0.1em solid #323232;\n background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));\n background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);\n border-radius: 3.4em;\n}\n\n.switch-border2:before,\n.switch-border2:after {\n content: '';\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 0;\n opacity: .3;\n border-radius: 3.4em;\n}\n\n.switch-border2:before {\n background: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0,0,0,0)));\n background: -webkit-linear-gradient(#000, rgba(0,0,0,0));\n background: -moz-linear-gradient(#000, rgba(0,0,0,0));\n background: -ms-linear-gradient(#000, rgba(0,0,0,0));\n background: -o-linear-gradient(#000, rgba(0,0,0,0));\n background: linear-gradient(#000, rgba(0,0,0,0));\n}\n\n.switch-border2:after {\n background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000));\n background: -webkit-linear-gradient(rgba(0,0,0,0), #000);\n background: -moz-linear-gradient(rgba(0,0,0,0), #000);\n background: -ms-linear-gradient(rgba(0,0,0,0), #000);\n background: -o-linear-gradient(rgba(0,0,0,0), #000);\n background: linear-gradient(rgba(0,0,0,0), #000);\n}\n\n.switch-top {\n width: 100%;\n height: 84%;\n position: absolute;\n top: 8%;\n left: 0;\n z-index: 1;\n background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));\n background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);\n border-radius: 3.4em;\n}\n\n.switch-shadow {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n border-radius: 3.4em;\n -webkit-box-shadow: 0 0 2em black inset;\n -moz-box-shadow: 0 0 2em black inset;\n box-shadow: 0 0 2em black inset;\n}\n\n.switch-handle-left,\n.switch-handle-right {\n content: '';\n display: block;\n width: 3.6em;\n height: 0;\n position: absolute;\n top: 6.6em;\n z-index: 2;\n border-bottom: 4.5em solid #111;\n border-left: 0.7em solid transparent;\n border-right: 0.7em solid transparent;\n border-radius: 0;\n}\n\n.switch-handle-left {\n left: 0.8em;\n}\n\n.switch-handle-right {\n right: 0.8em;\n}\n\n.switch-handle {\n width: 3.6em;\n height: 4.5em;\n position: absolute;\n top: 6.6em;\n left: 1.5em;\n z-index: 3;\n background: #333;\n background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));\n background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);\n border-radius: 0;\n}\n\n.switch-handle-top {\n width: 5em;\n height: 5em;\n position: absolute;\n top: 8.5em;\n left: 0.8em;\n z-index: 4;\n background-color: #555;\n background-image: -webkit-gradient(linear, left top, right top, from(#5F5F5F), to(#878787));\n background-image: -webkit-linear-gradient(left, #5F5F5F, #878787);\n background-image: -moz-linear-gradient(left, #5F5F5F, #878787);\n background-image: -ms-linear-gradient(left, #5F5F5F, #878787);\n background-image: -o-linear-gradient(left, #5F5F5F, #878787);\n background-image: linear-gradient(to right, #5F5F5F, #878787);\n border-top: 0.2em solid #AEB2B3;\n border-radius: 2.5em;\n}\n\n.switch-handle-bottom {\n width: 3.6em;\n height: 3.6em;\n position: absolute;\n top: 4.7em;\n left: 1.5em;\n z-index: 3;\n background: #333;\n background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));\n background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);\n border-top: 0.2em solid #141414;\n border-radius: 1.8em;\n}\n\n.switch-handle-base {\n width: 4.2em;\n height: 4.2em;\n position: absolute;\n top: 3.8em;\n left: 1.2em;\n z-index: 2;\n border-top: 0.2em solid rgba(255,255,255,0.35);\n border-radius: 2.1em;\n -webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;\n -moz-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;\n box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;\n}\n\n.switch-led {\n position: absolute;\n left: 2em;\n border-radius: 1.4em;\n}\n\n.switch-led-border {\n border: 0.2em solid black;\n border-radius: 1.3em;\n}\n\n.switch-led-light {\n border-radius: 1.1em;\n -webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;\n -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;\n box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;\n}\n\n.switch-led-glow {\n width: 2em;\n height: 2em;\n position: relative;\n border-radius: 1em;\n}\n\n.switch-led-glow:before {\n content: '';\n display: block;\n width: 0.6em;\n height: 0.6em;\n position: absolute;\n top: 0.3em;\n left: 0.7em;\n background: rgba(255,255,255,0.2);\n border-radius: 0.3em;\n -webkit-box-shadow: 0 0 1em rgba(255,255,255,0.75);\n -moz-box-shadow: 0 0 1em rgba(255,255,255,0.75);\n box-shadow: 0 0 1em rgba(255,255,255,0.75);\n}\n\n.switch-led-glow:after {\n content: '';\n display: block;\n width: 0;\n height: 0;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0.2;\n filter: alpha(opacity=20);\n border: 1em solid #fff;\n border-color: transparent #fff transparent #fff;\n border-radius: 1em;\n -webkit-transform: rotate(45deg);\n -moz-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n -o-transform: rotate(45deg);\n transform: rotate(45deg);\n}\n\n.switch-led:after {\n display: block;\n width: 100%;\n position: absolute;\n left: 0;\n color: #666;\n font-family: arial, verdana, sans-serif;\n font-weight: bold;\n text-align: center;\n text-shadow: 0 0.1em rgba(0,0,0,0.7);\n}\n\n.switch-led-green:after {\n content: 'ON';\n top: -1.8em;\n}\n\n.switch-led-red:after {\n content: 'OFF';\n bottom: -1.8em;\n}\n\n.switch-led-green {\n top: -5em;\n border-top: 0.1em solid rgba(0,161,75,0.5);\n border-bottom: 0.1em solid rgba(255,255,255,0.25);\n}\n\n.switch-led-green .switch-led-light {\n background: rgb(0,161,75);\n border: 0.1em solid rgb(0,104,56);\n}\n\n.switch-led-red {\n bottom: -5em;\n border-top: 0.1em solid rgba(237,28,36,0.2);\n border-bottom: 0.1em solid rgba(255,255,255,0.25);\n -webkit-box-shadow: 0 0 3em rgb(237,28,36);\n -moz-box-shadow: 0 0 3em rgb(237,28,36);\n box-shadow: 0 0 3em rgb(237,28,36);\n}\n\n.switch-led-red .switch-led-light {\n background: rgb(237,28,36);\n border: 0.1em solid rgb(161,30,45);\n}\n\n.switch-led-red .switch-led-glow {\n background: #fff;\n background: rgba(255, 255, 255, 0.3);\n filter: alpha(opacity=30);\n}\n\n/* Switch on */\n\n.switch input:checked~.switch-handle-left, .switch input:checked~.switch-handle-right {\n top: 1.5em;\n border-bottom: 0;\n border-top: 4.5em solid #111;\n}\n\n.switch input:checked~.switch-handle {\n top: 1.5em;\n}\n\n.switch input:checked~.switch-handle-top {\n top: -1em;\n border-top: 0;\n border-bottom: 0.2em solid #AEB2B3;\n}\n\n.switch input:checked~.switch-handle-bottom {\n top: 4.2em;\n border-top: 0;\n border-bottom: 0.2em solid #141414;\n}\n\n.switch input:checked~.switch-handle-base {\n top: 4.5em;\n border-top: 0;\n border-bottom: 0.2em solid rgba(255,255,255,0.35);\n}\n\n.switch input:checked~.switch-led-green {\n -webkit-box-shadow: 0 0 3em rgb(0,161,75);\n -moz-box-shadow: 0 0 3em rgb(0,161,75);\n box-shadow: 0 0 3em rgb(0,161,75);\n}\n\n.switch input:checked~.switch-led-green .switch-led-glow {\n background: #fff;\n background: rgba(255, 255, 255, 0.4);\n filter: alpha(opacity=40);\n}\n\n.switch input:checked~.switch-led-red {\n -webkit-box-shadow: none;\n -moz-box-shadow: none;\n box-shadow: none;\n}\n\n.switch input:checked~.switch-led-red .switch-led-glow {\n background: rgba(255, 255, 255, 0);\n filter: alpha(opacity=0);\n}\n\n#switchwhite {\n visibility: hidden;\n clip: rect(0 0 0 0);\n position: absolute;\n left: 9999px;\n}\n\n.switchwhite {\n display: block;\n width: 130px;\n height: 60px;\n margin: 70px auto;\n position: relative;\n background: #ced8da;\n /* Old browsers */\n background: -moz-linear-gradient(left, #ced8da 0%, #d8e0e3 29%, #ccd4d7 34%, #d4dcdf 62%, #fff9f4 68%, #e1e9ec 74%, #b7bfc2 100%);\n /* FF3.6+ */\n background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ced8da), color-stop(29%,#d8e0e3), color-stop(34%,#ccd4d7), color-stop(62%,#d4dcdf), color-stop(68%,#fff9f4), color-stop(74%,#e1e9ec), color-stop(100%,#b7bfc2));\n /* Chrome,Safari4+ */\n background: -webkit-linear-gradient(left, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);\n /* Chrome10+,Safari5.1+ */\n background: -o-linear-gradient(left, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);\n /* Opera 11.10+ */\n background: -ms-linear-gradient(left, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);\n /* IE10+ */\n background: linear-gradient(to right, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);\n /* W3C */\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ced8da', endColorstr='#b7bfc2',GradientType=1 );\n /* IE6-9 */\n transition: all 0.2s ease-out;\n cursor: pointer;\n border-radius: 0.35em;\n box-shadow: 0 0 1px 2px rgba(0,0,0,0.7),\n inset 0 2px 0 rgba(255,255,255,0.6),\n inset 0 -1px 0 1px rgba(0,0,0,0.3),\n 0 8px 10px rgba(0,0,0,0.15);\n}\n\n.switchwhite:before {\n display: block;\n position: absolute;\n left: -35px;\n right: -35px;\n top: -25px;\n bottom: -25px;\n z-index: -2;\n content: \"\";\n border-radius: 0.4em;\n background: #d5dde0;\n background: linear-gradient(#d7dfe2, #bcc7cd);\n box-shadow: inset 0 2px 0 rgba(255,255,255,0.6),\n inset 0 -1px 1px 1px rgba(0,0,0,0.3),\n 0 0 8px 2px rgba(0,0,0,0.2),\n 0 2px 4px 2px rgba(0,0,0,0.1);\n pointer-events: none;\n transition: all 0.2s ease-out;\n}\n\n.switchwhite:after {\n content: \"\";\n position: absolute;\n right: -25px;\n top: 50%;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #788b91;\n margin-top: -8px;\n z-index: -1;\n box-shadow: inset 0 -1px 8px rgba(0,0,0,0.7),\n inset 0 -2px 2px rgba(0,0,0,0.2),\n 0 1px 0 white,\n 0 -1px 0 rgba(0,0,0,0.5),\n -47px 32px 15px 13px rgba(0,0,0,0.25);\n}\n\n#switchwhite:checked ~ .switchwhite {\n background: #b7bfc2;\n /* Old browsers */\n background: -moz-linear-gradient(left, #b7bfc2 0%, #e1e9ec 26%, #fff9f4 32%, #d4dcdf 38%, #ccd4d7 66%, #d8e0e3 71%, #ced8da 100%);\n /* FF3.6+ */\n background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b7bfc2), color-stop(26%,#e1e9ec), color-stop(32%,#fff9f4), color-stop(38%,#d4dcdf), color-stop(66%,#ccd4d7), color-stop(71%,#d8e0e3), color-stop(100%,#ced8da));\n /* Chrome,Safari4+ */\n background: -webkit-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);\n /* Chrome10+,Safari5.1+ */\n background: -o-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);\n /* Opera 11.10+ */\n background: -ms-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);\n /* IE10+ */\n background: linear-gradient(to right, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);\n /* W3C */\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7bfc2', endColorstr='#ced8da',GradientType=1 );\n /* IE6-9 */\n}\n\n#switchwhite:checked ~ .switchwhite:after {\n background: #b1ffff;\n box-shadow: inset 0 -1px 8px rgba(0,0,0,0.7),\n inset 0 -2px 2px rgba(0,0,0,0.2),\n 0 1px 0 white,\n 0 -1px 0 rgba(0,0,0,0.5),\n -110px 32px 15px 13px rgba(0,0,0,0.25);\n}"}

soft-pug-40

👁 实时预览

📝 源代码