最近做项目遇到个switch,我还是百度解决的，但是我不能解决就完事啊，我得学会，然后和大家分享出来。

对就是这样非常的好使，也非常的美观，下面咱就撸代码。

//html部分
1
下面是css部分，有些地方我会解释下的

.switch {
width: 57px;
height: 28px;
position: relative;
border: 1px solid #dfdfdf;
background-color: #fdfdfd;
box-shadow: #dfdfdf 0 0 0 0 inset;
border-radius: 20px;
background-clip: content-box;
display: inline-block;
-webkit-appearance: none;
user-select: none;
outline: none;
}
.switch:before {
content: ‘’;
width: 26px;
height: 26px;
position: absolute;
top: 0;
left: 0;
border-radius: 20px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.switch:checked {
border-color: #64bd63;
box-shadow: #64bd63 0 0 0 16px inset;
background-color: #64bd63;
}
.switch:checked:before {
left: 30px;
}
.switch.switch-anim {
transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
}
.switch.switch-anim:before {
transition: left 0.3s;
}
.switch.switch-anim:checked {
box-shadow: #64bd63 0 0 0 16px inset;
background-color: #64bd63;
transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
}
.switch.switch-anim:checked:before {
transition: left 0.3s;
}
1
2
3
4
5
6
7
8
9
-webkit-appearance : none 是用来移除原生控件样式
transition是css3的过渡效果
cubic-bezier 这个是贝塞尔曲线有个可视化的网站（http://cubic-bezier.com）

好了，css完事就来点js，去控制这个switch开关

function checkNum(){
if($(’.switch-anim’).prop(‘checked’)){
console.log(“选中”);
}else{
console.log(“没选中”);
}
}
1
2
3
4
5
6
7

当然不要忘了去调用，这个函数哦