console
<input type="checkbox" id="switch"/>
<div class="content">
<div class="card_box">
<span class="capt1">智慧门店</span>
<p class="pge1">智慧经营用伊智,智能覆盖服务每一个环节,让门店高度信息化,解决门店运营、管理等问题</p>
<div class="feature">
<svg id="star" width="64px" height="64px" viewBox="0 0 64 64" >
<style type="text/css">
.st0{
fill-rule:evenodd;
clip-rule:evenodd;
fill:#FFFFFF;
opacity: .4;
}
</style>
<path id="Path" class="st0" d="M32.5,40.9c-0.3,0-0.6,0-0.9-0.3L20.9,35l-10.7,5.7c-0.8,0.3-1.6,0.3-2.2-0.2
c-0.6-0.5-0.9-1.3-0.8-2.1l2-11.9l-8.6-8.4C0,17.6-0.2,16.8,0.2,16c0.3-0.8,0.9-1.3,1.7-1.4l11.9-1.7L19.1,2c0.8-1.4,3-1.4,3.8,0
l5.3,10.8l11.9,1.7c0.8,0.2,1.4,0.6,1.7,1.4s0,1.6-0.5,2.2l-8.6,8.4l2,11.9c0.2,0.8-0.2,1.6-0.8,2.1C33.4,40.7,32.9,40.9,32.5,40.9"
/>
</svg>
<div class="feature_cnt">
<span class="capt2">拓展新客,维护老客</span>
<p class="pge2">全方位拓宽门店触达客户的渠道,进行精准维护</p>
</div>
</div>
</div>
<div class="trigger">
<label for="switch">
<div class="toggle"></div>
<div class="names">
<p class="light">Light</p>
<p class="dark">Dark</p>
</div>
</label>
</div>
</div>
<script>
var triggle = document.getElementsByClassName('names');
triggle[0].onclick = function () {
document.body.classList.toggle ("body_black");
}
</script>
[type="checkbox"] {
display: none;
}
body {
padding: 0;
margin: 0;
background-color: #FFFFFF;
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.body_black {
background-color: #121212;
}
.index_bar {
display: flex;
flex-direction: row;
background: #E8E8E8;
padding: 12px;
}
.index_bar span {
width: 14px;
height: 14px;
margin: 0 4px;
border-radius: 8px;
}
.index_bar span:nth-child(1){
background: #FF6159;
}
.index_bar span:nth-child(2){
background: #FFBD2E;
}
.index_bar span:nth-child(3){
background: #29CA41;
}
.trigger{
width: 60%;
margin: 30px auto;
text-align: center;
display: flex;
flex-direction: column;
}
label, .toggle {
height: 2.8rem;
border-radius: 100px;
}
label {
width: 240px;
background-color: #F4F4F6;
border-radius: 100px;
position: relative;
margin: 0 auto;
cursor: pointer;
}
.toggle {
position: absolute;
width: 50%;
background-color: #fff;
box-shadow: 0 2px 15px rgba(0,0,0,.15);
transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.names {
width: 100%;
font-size: 14px;
font-weight: bolder;
margin:0 auto;
position: absolute;
display: flex;
justify-content: space-around;
}
.light {
color: #f75f1e;
}
.dark {
opacity: .5;
}
.card_box {
width: 76%;
max-width: 350px;
background-color: #FFFFFF;
border: 1px solid #E8E8E8;
box-shadow: 0 8px 14px 0 rgba(38,38,38,0.18);
border-radius: 5px;
padding: 24px;
margin: 32px auto;
}
.capt1 {
font-size: 20px;
color: #262626;
}
.capt2 {
color: #FFFFFF;
}
.pge1 {
font-size: 15px;
color: #525252;
}
.pge2{
opacity: 0.8;
font-size: 14px;
color: #FFFFFF;
margin: 4px 0 0 0;
}
.feature {
display: flex;
flex-direction: row;
align-items: center;
padding: 12px;
background-image: radial-gradient(circle farthest-corner at 100% 100%, #ffc247, #f75f1e);
border-radius: 5px;
}
#star {
padding-top: 10px;
overflow: visible;
}
@media screen and (max-width :420px) {
.trigger{
width: 100%;
margin: 12px auto;
}
}
[type="checkbox"]:checked + .content label {
background: #000000;
}
[type="checkbox"]:checked + .content .toggle {
transform: translate(100%, 0);
background: #525252;
box-shadow: 0 2px 15px 0 rgba(0,0,0,0.50);
}
[type="checkbox"]:checked + .content .light {
color: #DBDBDB;
opacity: .5;
}
[type="checkbox"]:checked + .content .dark {
color: #d4a7ff;
opacity: 1;
}
[type="checkbox"]:checked + .content .card_box {
background: #262626;
border: 1px solid #404040;
box-shadow: 0 8px 14px 0 rgba(18,18,18,0.40);
border-radius: 5px;
}
[type="checkbox"]:checked + .content .capt1 {
color: #FFFFFF;
}
[type="checkbox"]:checked + .content .pge1 {
color: #DBDBDB;
}
[type="checkbox"]:checked + .content .feature {
background-image:radial-gradient(circle farthest-corner at 100% 100%, #d873e8, #4637d0);
border-radius: 5px;
}