html结构
- <divclass="container">
- <divclass="bg_con">
- <inputid="checked_1"type="checkbox"class="switch"/>
- <labelfor="checked_1"></label>
- </div>
- </div>
css代码,:before负责颜色,:after是那个白色小圆点,切换时的过渡效果用css3的动画实现。
- .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滑动开关按钮效果内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!