第一篇文章

开关：

 

样式

<style>
#checkbox {
display: none;
}
#checkbox + label {
cursor: pointer;
font-size: 1em;
border-radius: 50px;
position: relative;
width: 36px;
height: 20px;
vertical-align: middle;
}
#checkbox + label:after {
content: ' ';
position: absolute;
background: #E6332C;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100px;
box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}
#checkbox + label:before {
content: ' ';
position: absolute;
background: white;
top: 2px;
left: 2px;
z-index: 99999;
width: 16px;
height: 16px;
border-radius: 50%;
box-shadow: 0 0 2px rgba(0,0,0,0.5), inset 0 -18px 15px -10px rgba(0,0,0,0.05);
}
#checkbox + label:active {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

#checkbox:checked + label:before {
content: ' ';
position: absolute;
left: 18px;
border-radius: 100px;
}
#checkbox:checked + label:after {
content: ' ';
font-size: 1.5em;
position: absolute;
background: #63C99C;
}

#checkbox + label:after, #checkbox + label:before{
-webkit-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
}
</style>

 

html

<input type="checkbox" id="checkbox" />
<label for="checkbox"></label>
<label>请点击开关</label>