CSS3的开关按钮

这个开关按钮其实是前几天百无聊赖写的,其实就是用了CSS3的一点点属性而已,先上html代码

1
2
<input type="checkbox" name="sex" id="male" />
<label for="male"></label>

CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
input[type="checkbox"]{
display:none;
}

label{
box-shadow:#ccc 0px 0px 0px 1px;
width:40px;
height:20px;
display:inline-block;
border-radius:20px;
position:relative;
background-color:#bdbdbd;
overflow:hidden;
}

label:before{
content:'';
position:absolute;

left:0px;
width:20px;
height:20px;
display:inline-block;
border-radius:20px;
background-color:#fff;
z-index:20;
-webkit-transition:all 0.5s;
transition:all 0.5s;
}


input:checked + label:before{
left:20px;
}

input:checked + label{
background-color:#51ccee;
}

好了,代码就这么几行,是不是很简单呢? 线上demo地址