{"html":"\n

\n \n

\n \n \n \n

\n \n \n

Light

Dark

\n \n \n \n

\n \n

","css":"/* GENERAL */\n\n.credit {\n position: fixed;\n right: 2rem;\n bottom: 2rem;\n color: white;\n}\n\n.credit a {\n color: inherit;\n}\n\n/* Main Circle */\n.main-circle {\n width: 40rem;\n height: 40rem;\n border-radius: 100%;\n background: linear-gradient(40deg, #FF0080,#FF8C00 70%);\n position: absolute;\n z-index: 1;\n left: 50%;\n -webkit-transform: translate(-50%, -70%);\n -ms-transform: translate(-50%, -70%);\n transform: translate(-50%, -70%)\n}\n\n/* Phone */\n.phone {\n position: relative;\n z-index: 2;\n width: 18rem;\n height: 17rem;\n background-color: inherit;\n -webkit-box-shadow: 0 4px 35px rgba(0,0,0,.1);\n box-shadow: 0 4px 35px rgba(0,0,0,.1);\n border-radius: 40px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n\n\n/* Top */\n.menu {\n/* background-color: blue; */\n font-size: 80%;\n opacity: .4;\n padding: .8rem 1.8rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.icons {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n margin-top: .5rem;\n}\n\n.battery {\n width: .85rem;\n height: .45rem;\n background-color: black;\n}\n\n.network {\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 0 6.8px 7.2px 6.8px;\n border-color: transparent transparent black transparent;\n -webkit-transform: rotate(135deg);\n -ms-transform: rotate(135deg);\n transform: rotate(135deg);\n margin: .12rem .5rem;\n}\n\n/* Middle */\n.content {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n margin: auto;\n text-align: center;\n width: 70%;\n -webkit-transform: translateY(5%);\n -ms-transform: translateY(5%);\n transform: translateY(5%);\n}\n\n.circle {\n position: relative;\n border-radius: 100%;\n width: 8rem;\n height: 8rem;\n background: linear-gradient(40deg, #FF0080,#FF8C00 70%);\n margin: auto;\n}\n\n.crescent {\n position: absolute;\n border-radius: 100%;\n right: 0;\n width: 6rem;\n height: 6rem;\n background: white;\n -webkit-transform: scale(0);\n -ms-transform: scale(0);\n transform: scale(0);\n -webkit-transform-origin: top right;\n -ms-transform-origin: top right;\n transform-origin: top right;\n -webkit-transition: -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);\n transition: -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);\n transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);\n transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n\nlabel, .toggle {\n height: 2.8rem;\n border-radius: 100px;\n}\n\nlabel {\n width: 100%;\n background-color: rgba(0,0,0,.1);\n border-radius: 100px;\n position: relative;\n margin: 1.8rem 0 4rem 0;\n cursor: pointer;\n}\n\n.toggle {\n position: absolute;\n width: 50%;\n background-color: #fff;\n -webkit-box-shadow: 0 2px 15px rgba(0,0,0,.15);\n box-shadow: 0 2px 15px rgba(0,0,0,.15);\n -webkit-transition: -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n transition: -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n.names {\n font-size: 90%;\n font-weight: bolder;\n color: black;\n width: 65%;\n margin-left: 17.5%;\n margin-top: 6.5%;\n position: absolute;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.dark {\n opacity: .5;\n}\n\n.mark {\n border-radius: 100px;\n background-color: black;\n}\n\n.time {\n color: black;\n}\n/* -------- Switch Styles ------------*/\n[type=\"checkbox\"] {\n display: none;\n}\n/* Toggle */\n[type=\"checkbox\"]:checked + .app .toggle {\n -webkit-transform: translateX(100%);\n -ms-transform: translateX(100%);\n transform: translateX(100%);\n background-color: #34323D;\n}\n\n[type=\"checkbox\"]:checked + .app .dark {\n opacity: 1;\n color: white;\n}\n\n[type=\"checkbox\"]:checked + .app .light {\n opacity: 1;\n color: white;\n}\n/* App */\n[type=\"checkbox\"]:checked + .app .body {\n background-color: #26242E;\n color: white;\n}\n/* Circle */\n[type=\"checkbox\"]:checked + .app .crescent {\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n background: #26242E;\n}\n\n[type=\"checkbox\"]:checked + .app .circle {\n background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);\n}\n\n[type=\"checkbox\"]:checked + .app .main-circle {\n background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);\n}\n\n[type=\"checkbox\"]:checked + .time {\n color: white;\n}\n\n[type=\"checkbox\"]:checked + .app .body .phone .menu .time {\n color: white;\n}\n\n[type=\"checkbox\"]:checked + .app .body .phone .menu .icons .network {\n border-color: transparent transparent white transparent;\n}\n\n[type=\"checkbox\"]:checked + .app .body .phone .menu .icons .battery {\n background-color: white;\n}\n\n[type=\"checkbox\"]:checked + .app .body {\n border-radius: 40px;\n ;\n}\n\n.menu {\n/* background-color: blue; */\n font-size: 80%;\n opacity: .4;\n padding: .8rem 1.8rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n"}

strong-treefrog-90

👁 实时预览

📝 源代码

🔗 相关联的样式