{"html":"\n

\n\n \n

\n\n \n OFF\n 1\n 2\n 3\n 4\n 5\n\n \n \n \n \n \n \n \n\n \n

\n\n \n

","css":"/* SWITCH\n--------------------------------------------- */\n\n.container .origin {\n position: absolute;\n left: 50%;\n top: 50%;\n z-index: 111;\n width: 2px;\n height: 2px;\n margin: -1px 0 0 -1px;\n background-color: #f50;\n}\n\n.de {\n user-select: none;\n position: relative;\n width: 230px;\n height: 230px;\n border-radius: 100%;\n box-shadow: 0 0 25px rgba(0, 0, 0, .1);\n background-color: transparent;\n}\n\n.de .den, .de .dene, .de .denem, .de .deneme, .de .light, .de .dot {\n position: absolute;\n left: 50%;\n top: 50%;\n}\n\n.den {\n position: relative;\n width: 220px;\n height: 220px;\n margin: -110px 0 0 -110px;\n border-radius: 100%;\n box-shadow: inset 0 3px 10px rgba(0, 0, 0, .6), 0 2px 20px rgba(255, 255, 255, 1);\n background: #888888;\n background: -moz-radial-gradient(center, ellipse cover, #888888 0%, #333333 100%);\n background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #888888), color-stop(100%, #333333));\n background: -webkit-radial-gradient(center, ellipse cover, #888888 0%, #333333 100%);\n background: -o-radial-gradient(center, ellipse cover, #888888 0%, #333333 100%);\n}\n\n.dene {\n z-index: 4;\n width: 140px;\n height: 140px;\n margin: -70px 0 0 -70px;\n border-radius: 100%;\n box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), 0 3px 13px rgba(0, 0, 0, .85);\n background: #f2f6f5;\n background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));\n background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);\n background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);\n}\n\n.denem {\n width: 120px;\n height: 120px;\n margin: -60px 0 0 -60px;\n border-radius: 100%;\n background: #cbd5d6;\n background: -moz-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cbd5d6), color-stop(100%, #f2f6f5));\n background: -webkit-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);\n background: -o-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);\n}\n\n.deneme {\n width: 100px;\n height: 100px;\n margin: -50px 0 0 -50px;\n border-radius: 100%;\n box-shadow: inset 0 2px 3px rgba(255, 255, 255, .6), 0 8px 20px rgba(0, 0, 0, .9);\n background: #eef7f6;\n background: -moz-linear-gradient(top, #eef7f6 0%, #8d989a 100%);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eef7f6), color-stop(100%, #8d989a));\n background: -webkit-linear-gradient(top, #eef7f6 0%, #8d989a 100%);\n background: -o-linear-gradient(top, #eef7f6 0%, #8d989a 100%);\n}\n\n.den .switch {\n z-index: 3;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.den .switch label {\n z-index: 2;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 50%;\n height: 70px;\n margin-top: -35px;\n transform-origin: 0% 50%;\n -webkit-transform-origin: 0% 50%;\n -o-transform-origin: 0% 50%;\n}\n\n.den .switch label:after {\n content: \"\";\n position: absolute;\n top: 6px;\n left: 1px;\n width: 100%;\n height: 30px;\n transform: rotate(-30deg);\n -webkit-transform: rotate(-30deg);\n -o-transform: rotate(-30deg);\n}\n\n.den .switch label:before {\n content: \"\";\n position: absolute;\n bottom: 6px;\n left: 1px;\n width: 100%;\n height: 30px;\n transform: rotate(30deg);\n -webkit-transform: rotate(30deg);\n -o-transform: rotate(30deg);\n}\n\n.den .switch label span {\n z-index: 2;\n position: absolute;\n top: 0;\n right: 0;\n width: 40px;\n height: 100%;\n font-weight: bold;\n font-size: 15px;\n line-height: 70px;\n text-align: center;\n color: #eee;\n text-shadow: 0 1px 0 #444;\n}\n\n.den .switch label:nth-child(1) {\n transform: rotate(-90deg);\n -webkit-transform: rotate(-90deg);\n -o-transform: rotate(-90deg);\n}\n\n.den .switch label:nth-child(1) span {\n right: 2px;\n font-size: 13px;\n transform: rotate(90deg);\n -webkit-transform: rotate(90deg);\n -o-transform: rotate(90deg);\n}\n\n.den .switch label:nth-child(2) {\n transform: rotate(-30deg);\n -webkit-transform: rotate(-30deg);\n -o-transform: rotate(-30deg);\n}\n\n.den .switch label:nth-child(2) span {\n transform: rotate(30deg);\n -webkit-transform: rotate(30deg);\n -o-transform: rotate(30deg);\n}\n\n.den .switch label:nth-child(3) {\n transform: rotate(30deg);\n -webkit-transform: rotate(30deg);\n -o-transform: rotate(30deg);\n}\n\n.den .switch label:nth-child(3) span {\n transform: rotate(-30deg);\n -webkit-transform: rotate(-30deg);\n -o-transform: rotate(-30deg);\n}\n\n.den .switch label:nth-child(4) {\n transform: rotate(90deg);\n -webkit-transform: rotate(90deg);\n -o-transform: rotate(90deg);\n}\n\n.den .switch label:nth-child(4) span {\n transform: rotate(-90deg);\n -webkit-transform: rotate(-90deg);\n -o-transform: rotate(-90deg);\n}\n\n.den .switch label:nth-child(5) {\n transform: rotate(150deg);\n -webkit-transform: rotate(150deg);\n -o-transform: rotate(150deg);\n}\n\n.den .switch label:nth-child(5) span {\n transform: rotate(-150deg);\n -webkit-transform: rotate(-150deg);\n -o-transform: rotate(-150deg);\n}\n\n.den .switch label:nth-child(6) {\n transform: rotate(210deg);\n -webkit-transform: rotate(210deg);\n -o-transform: rotate(210deg);\n}\n\n.den .switch label:nth-child(6) span {\n transform: rotate(-210deg);\n -webkit-transform: rotate(-210deg);\n -o-transform: rotate(-210deg);\n}\n\n.den .switch input {\n position: absolute;\n opacity: 0;\n visibility: hidden;\n}\n\n/* SWITCH LIGHT */\n\n.den .light {\n z-index: 1;\n width: 50%;\n height: 100px;\n margin-top: -50px;\n transform-origin: 0% 50%;\n -webkit-transform-origin: 0% 50%;\n -o-transform-origin: 0% 50%;\n transform: rotate(-90deg);\n -webkit-transform: rotate(-90deg);\n -o-transform: rotate(-90deg);\n -webkit-transition: all .5s;\n transition: all .5s;\n -o-transition: all .5s;\n}\n\n.den .light span {\n opacity: .4;\n position: absolute;\n top: 0;\n left: 15px;\n width: 100px;\n height: 100px;\n background: -moz-radial-gradient(center, ellipse cover, rgba(184, 163, 204, 1) 0%, rgba(159, 197, 224, 0.42) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%);\n background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(184, 163, 204, 1)), color-stop(42%, rgba(159, 197, 224, 0.42)), color-stop(72%, rgba(111, 113, 179, 0)), color-stop(100%, rgba(67, 34, 137, 0)));\n background: -webkit-radial-gradient(center, ellipse cover, rgba(184, 163, 204, 1) 0%, rgba(159, 197, 224, 0.42) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%);\n background: -o-radial-gradient(center, ellipse cover, rgba(184, 163, 204, 1) 0%, rgba(159, 197, 224, 0.42) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%);\n}\n\n/* SWITCH LIGHT POSITION */\n\n.den #switch_off:checked ~ .light {\n transform: rotate(-90deg);\n -webkit-transform: rotate(-90deg);\n -o-transform: rotate(-90deg);\n}\n\n.den #switch_1:checked ~ .light {\n transform: rotate(-30deg);\n -webkit-transform: rotate(-30deg);\n -o-transform: rotate(-30deg);\n}\n\n.den #switch_2:checked ~ .light {\n transform: rotate(30deg);\n -webkit-transform: rotate(30deg);\n -o-transform: rotate(30deg);\n}\n\n.den #switch_3:checked ~ .light {\n transform: rotate(90deg);\n -webkit-transform: rotate(90deg);\n -o-transform: rotate(90deg);\n}\n\n.den #switch_4:checked ~ .light {\n transform: rotate(150deg);\n -webkit-transform: rotate(150deg);\n -o-transform: rotate(150deg);\n}\n\n.den #switch_5:checked ~ .light {\n transform: rotate(210deg);\n -webkit-transform: rotate(210deg);\n -o-transform: rotate(210deg);\n}\n\n/* SWITCH LIGHT */\n\n.den .dot {\n z-index: 6;\n width: 50%;\n height: 12px;\n margin-top: -6px;\n transform-origin: 0% 50%;\n -webkit-transform-origin: 0% 50%;\n -o-transform-origin: 0% 50%;\n transition: all .5s;\n -moz-transition: all .5s;\n -o-transition: all .5s;\n}\n\n.den .dot span {\n position: absolute;\n top: 0;\n left: 30px;\n width: 12px;\n height: 12px;\n border-radius: 100%;\n background: #dae2e4;\n background: -moz-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dae2e4), color-stop(100%, #ecf5f4));\n background: -webkit-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);\n background: -o-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);\n}\n\n/* SWITCH LIGHT POSITION */\n\n.den #switch_off:checked ~ .dot {\n transform: rotate(-90deg);\n -webkit-transform: rotate(-90deg);\n -o-transform: rotate(-90deg);\n}\n\n.den #switch_off:checked ~ .dot span {\n transform: rotate(90deg);\n -webkit-transform: rotate(90deg);\n -o-transform: rotate(90deg);\n}\n\n.den #switch_1:checked ~ .dot {\n transform: rotate(-30deg);\n -webkit-transform: rotate(-30deg);\n -o-transform: rotate(-30deg);\n}\n\n.den #switch_1:checked ~ .dot span {\n opacity: .9;\n transform: rotate(30deg);\n -webkit-transform: rotate(30deg);\n -o-transform: rotate(30deg);\n}\n\n.den #switch_2:checked ~ .dot {\n transform: rotate(30deg);\n -webkit-transform: rotate(30deg);\n -o-transform: rotate(30deg);\n}\n\n.den #switch_2:checked ~ .dot span {\n opacity: .5;\n transform: rotate(-30deg);\n -webkit-transform: rotate(-30deg);\n -o-transform: rotate(-30deg);\n}\n\n.den #switch_3:checked ~ .dot {\n transform: rotate(90deg);\n -webkit-transform: rotate(90deg);\n -o-transform: rotate(90deg);\n}\n\n.den #switch_3:checked ~ .dot span {\n opacity: .4;\n transform: rotate(-90deg);\n -webkit-transform: rotate(-90deg);\n -o-transform: rotate(-90deg);\n}\n\n.den #switch_4:checked ~ .dot {\n transform: rotate(150deg);\n -webkit-transform: rotate(150deg);\n -o-transform: rotate(150deg);\n}\n\n.den #switch_4:checked ~ .dot span {\n opacity: .5;\n transform: rotate(-150deg);\n -webkit-transform: rotate(-150deg);\n -o-transform: rotate(-150deg);\n}\n\n.den #switch_5:checked ~ .dot {\n transform: rotate(210deg);\n -webkit-transform: rotate(210deg);\n -o-transform: rotate(210deg);\n}\n\n.den #switch_5:checked ~ .dot span {\n opacity: .9;\n transform: rotate(-210deg);\n -webkit-transform: rotate(-210deg);\n -o-transform: rotate(-210deg);\n}\n\n/* LINE */\n\n.den hr.line {\n z-index: 1;\n position: absolute;\n top: 50%;\n width: 100%;\n height: 0;\n margin-top: -1px;\n border-width: 1px 0;\n border-style: solid;\n border-top-color: #3c3d3f;\n border-bottom-color: #666769;\n}\n\n.den hr.line:nth-child(1) {\n transform: rotate(-60deg);\n -webkit-transform: rotate(-60deg);\n -o-transform: rotate(-60deg);\n}\n\n.den hr.line:nth-child(2) {\n transform: rotate(60deg);\n -webkit-transform: rotate(60deg);\n -o-transform: rotate(60deg);\n}"}

hungry-bat-66

👁 实时预览

📝 源代码