纯CSS3代码实现switch滑动开关按钮效果

发布时间：2020-03-17 07:45:56 所属栏目：系统来源：站长网

导读：副标题#e# XML/HTML Code复制内容到剪贴板 divclass=container divclass=bg_con inputid=checked_1type=checkboxclass=switch/ labelfor=checked_1/label /div /div css代码，:before负责颜色，:after是那个白色小圆点，切换时的过渡效果用css3的动画实现。

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滑动开关按钮效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2/2

首页