html结构

XML/HTML Code复制内容到剪贴板 <divclass="container"> <divclass="bg_con"> <inputid="checked_1"type="checkbox"class="switch"/> <labelfor="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:all0.3sease; } 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:1px1px1px1pxrgba(0,0,0,0.08); -webkit-transform:translateX(-9px); -webkit-transition:all0.3sease; } .switch:checked~label:after{ -webkit-transform:translateX(9px); } .switch:checked~label:before{ background-color:green; }

以上所述是小编给大家介绍的纯CSS3代码实现switch滑动开关按钮效果 ，希望对大家有所帮助，如果大家有任何疑问请给我们留言，小编会及时回复大家的。在此也非常感谢大家对查字典教程网的支持！