看淡拥有，不刻意追求某些东西，落叶归根，那些属于你的，总会回来。劳动的意义不仅在于追求业绩，更在于完善人的心灵。
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滑动开关按钮效果 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
到此这篇关于纯CSS3代码如何实现switch滑动开关按钮效果就介绍到这了。爱给予的只是它自己，取走的也只从它自己，爱不占有，也不能被占有。爱就在爱中满足。更多相关纯CSS3代码如何实现switch滑动开关按钮效果内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
