就是这个开关，代码是从weui上拷贝出来的。 至于weui自己百度吧 ^_^~
开关代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.weui_switch
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
width: 52px;
height: 32px;
border: 1px solid #DFDFDF;
outline: 0;
border-radius: 16px;
box-sizing: border-box;
background: #DFDFDF;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
display: inline-block;
text-align: start;
}
.weui_switch:before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 30px;
border-radius: 15px;
background-color: #FDFDFD;
-webkit-transition: -webkit-transform .3s;
transition: transform .3s;
}
.weui_switch:after {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
border-radius: 15px;
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-webkit-transition: -webkit-transform .3s;
transition: transform .3s;
}
.weui_switch:checked {
border-color: #04BE02;
background-color: #04BE02;
}
.weui_switch:checked:before {
-webkit-transform: scale(0);
transform: scale(0);
}
.weui_switch:checked:after {
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
</style>
</head>
<body>
<input type='checkbox' class='weui_switch'>
</body>
</html>