css3实现的简单开关按钮代码实例:
本章节分享一段代码实例，它使用css3实现了开关按钮效果。
代码和网上实用的相比相对粗陋一点，但是完全能够演示它实现的原理。
需要的朋友可以做一下参考，代码实例如下:
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
上面的功能是开和关是由复选框的选中和取消选中来实现的。
但是我们看到的效果并不是复选框，复选框处于隐藏状态，由以下代码实现:
之所以点击的时候能够实现切换是由于使用<label>标签和checkbox复选框关联起来的原因。
上面的代码规定了扁平开关活动区域，截图如下:
就是红色的框区域。
上面的代码规定了圆形的开关按钮。
是通过:before伪元素选择器添加的，它是绝对定位，这样可以通过调整它的left属性值实现左右移动效果。
又通过transition实现了左右移动动画效果。
当复选框选中的时候，就将伪元素选择器添加的元素left值设置为20px，也就是移到右端。
上面的设置label元素的背景颜色为#51ccee。
二.相关阅读:
（1）.[type="checkbox"]可以参阅 CSS E[att="val"]属性选择符 一章节。
（2）.box-shadow可以参阅 CSS3 box-shadow 一章节。
（3）.border-radius可以参阅 CSS3 border-radius圆角 一章节。
（4）.:before可以参阅 CSS E:before/E::before伪对象选择符 一章节。
（5）.transition可以参阅 CSS3 transition 一章节。
（6）.:checked可以参阅 CSS E:checked伪类选择符 一章节。
本章节分享一段代码实例，它使用css3实现了开关按钮效果。
代码和网上实用的相比相对粗陋一点，但是完全能够演示它实现的原理。
需要的朋友可以做一下参考，代码实例如下:
[HTML]
纯文本查看
复制代码
运行代码
|
01
02
03
04
05
06
07
08
09
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
" utf-8"
>
<
title
>蚂蚁部落</
title
>
<
style
type
=
"text/css"
>
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;
}
</
style
>
</
head
>
<
body
>
<
input
type
=
"checkbox"
name
=
"sex"
id
=
"male"
/>
<
label
for
=
"male"
></
label
>
</
body
>
</
html
>
|
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
上面的功能是开和关是由复选框的选中和取消选中来实现的。
但是我们看到的效果并不是复选框，复选框处于隐藏状态，由以下代码实现:
[CSS]
纯文本查看
复制代码
|
1
2
3
|
input[type=
"checkbox"
]{
display
:
none
;
}
|
之所以点击的时候能够实现切换是由于使用<label>标签和checkbox复选框关联起来的原因。
[CSS]
纯文本查看
复制代码
|
01
02
03
04
05
06
07
08
09
10
|
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
;
}
|
上面的代码规定了扁平开关活动区域，截图如下:
就是红色的框区域。
[CSS]
纯文本查看
复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
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.5
s;
transition:
all
0.5
s;
}
|
上面的代码规定了圆形的开关按钮。
是通过:before伪元素选择器添加的，它是绝对定位，这样可以通过调整它的left属性值实现左右移动效果。
又通过transition实现了左右移动动画效果。
[CSS]
纯文本查看
复制代码
|
1
2
3
|
input:checked + label:before{
left
:
20px
;
}
|
当复选框选中的时候，就将伪元素选择器添加的元素left值设置为20px，也就是移到右端。
[CSS]
纯文本查看
复制代码
|
1
2
3
|
input:checked + label{
background-color
:
#51ccee
;
}
|
上面的设置label元素的背景颜色为#51ccee。
二.相关阅读:
（1）.[type="checkbox"]可以参阅 CSS E[att="val"]属性选择符 一章节。
（2）.box-shadow可以参阅 CSS3 box-shadow 一章节。
（3）.border-radius可以参阅 CSS3 border-radius圆角 一章节。
（4）.:before可以参阅 CSS E:before/E::before伪对象选择符 一章节。
（5）.transition可以参阅 CSS3 transition 一章节。
（6）.:checked可以参阅 CSS E:checked伪类选择符 一章节。
（7）.+选择器可以参阅CSS (E+F)相邻选择符一章节。
转自：http://www.softwhy.com/forum.php?mod=viewthread&tid=18836
http://www.softwhy.com/forum.php?mod=viewthread&tid=18836
(出处: 蚂蚁部落)
2137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
