html結(jié)構(gòu)
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<div class="container">
<div class="bg_con">
<input id="checked_1" type="checkbox" class="switch" />
<label for="checked_1"></label>
</div>
</div>
css代碼,:before負(fù)責(zé)顏色,:after是那個(gè)白色小圓點(diǎn),切換時(shí)的過(guò)渡效果用css3的動(dòng)畫實(shí)現(xiàn)。
CSS Code復(fù)制內(nèi)容到剪貼板
.switch{
display:none;
}
label{
position:relative;
display: block;
padding: 1px;
border-radius: 24px;
height: 22px;
margin-bottom: 15px;
background-color: #eee;
cursor: pointer;
vertical-align: top;
-webkit-user-select: none;
}
label:before{
content: ”;
display: block;
border-radius: 24px;
height: 22px;
background-color: white;
-webkit-transform: scale(1, 1);
-webkit-transition: all 0.3s ease;
}
label:after{
content: ”;
position: absolute;
top: 50%;
新聞熱點(diǎn)
疑難解答
圖片精選