由 dawei 副标题#e#
XML/HTML Code复制内容到剪贴板
<div class="container">
<div class="bg_con">
<input id="checked_1" type="checkbox" class="switch" />
<label for="checked_1"></label>
</div>
</div>
css代码，:before负责颜色，:after是那个白色小圆点，切换时的过渡效果用css3的动画实现。
CSS Code复制内容到剪贴板
.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;
#p#副标题#e#
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;
}
以上所述是小编给大家介绍的纯CSS3代码实现switch滑动开关按钮效果 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！