当前位置: 首页 » 前端开发 » HTML5 css3 开关按钮
字号调整:

HTML5 css3 开关按钮

haibao 前端开发 2015-04-15 17:41:37 750 百度已收录
本文最后更新于2015-04-15,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!
历史上的今天: -

凌晨好, 本文除去代码部分,共1662个字,预计阅读时间需要5分钟。

利用html5+css3+jQuery实现的开关按钮。代码以及效果如下:

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="center">
 
    <div class="k-switch">
        <div class="track"></div>
        <div class="ball green"></div>
        <div class="ball red"></div>
    </div>
 
    <div class="k-switch on">
        <div class="track"></div>
        <div class="ball green"></div>
        <div class="ball red"></div>
    </div>
 
</div>

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
html,body {
    background-color: #2d2d39;
}
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.k-switch {
    cursor: pointer;
    position: relative;
    display: inline-block;
    background: #252531;
    width: 80px;
    height: 35px;
    clear: both;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    -moz-box-shadow: inset 0px 1px 2px #121117, 0px 1px 1px #3e3d4b;
    -webkit-box-shadow: inset 0px 1px 2px #121117, 0px 1px 1px #3e3d4b;
    box-shadow: inset 0px 1px 2px #121117, 0px 1px 1px #3e3d4b;
}
.k-switch.on .track {
    left: 45px;
}
.k-switch.on .ball.red {
    opacity: 0;
    visibility: hidden;
}
.k-switch.on .ball.green {
    opacity: 1;
    visibility: visible;
}
.k-switch .ball {
    width: 12px;
    height: 12px;
    border: 1px solid;
    margin: 11px;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.k-switch .ball.red {
    float: right;
    border-color: #e73d3d;
}
.k-switch .ball.green {
    float: left;
    opacity: 0;
    border-color: #6cda86;
}
.k-switch .track {
    width: 25px;
    height: 25px;
    margin: 5px;
    position: absolute;
    left: 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: linear-gradient(to top, #323141 0%, #383546 47%, #3c3b4d 100%);
    -moz-box-shadow: 0px 1px 2px #121117, inset 0px 1px 2px #444257;
    -webkit-box-shadow: 0px 1px 2px #121117, inset 0px 1px 2px #444257;
    box-shadow: 0px 1px 2px #121117, inset 0px 1px 2px #444257;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

JS:

1
2
3
4
5
6
7
8
9
10
11
$(".k-switch").click(function() {
 
    var self = $(this);
 
    if (self.hasClass("on")) {
        self.removeClass("on");
    } else {
        self.addClass("on");
    }
 
});

至此,谢谢~

本文标题:HTML5 css3 开关按钮

本文地址:http://www.hehaibao.com/html5-switch-button/

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!

发表评论

电子邮件地址不会被公开。 必填项已用*标注