之前阿里電面的時(shí)候問的一個(gè)問題，今天抽時(shí)間做了個(gè)demo。
html結(jié)構(gòu)
<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í)的過渡效果用css3的動(dòng)畫實(shí)現(xiàn)。
.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%; left: 50%; margin-top: -11px; margin-left: -11px; width: 22px; height: 22px; border-radius: 22px; background-color: white; box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08); -webkit-transform: translateX(-9px); -webkit-transition: all 0.3s ease; } .switch:checked~label:after{ -webkit-transform: translateX(9px); } .switch:checked~label:before{ background-color:green; }
【 微信掃一掃 】
