纯CSS3实现滑动开关效果

原创 2015年08月17日 11:56:21

实现效果如下:



HTML结构代码:
<label class="ui-switch">
      <input type="checkbox" checked="">
</label>


CSS代码:
/*表单开关样式*/
.ui-switch {
    position: absolute;
    font-size: .16rem;
    right:0.07rem;
    top: 50%;
    margin-top: -0.16rem;
    width: .7rem;
    height: .3rem;
    line-height: .3rem;
}
.ui-switch input {
    width: .7rem;
    height: .3rem;
    position: absolute;
    top: 0;left: 0;  
    z-index: 2;
    border: 0;
    background: 0 0;
    -webkit-appearance: none;
    outline: 0
}
.ui-switch input:before {
    content: '';
    width: .68rem;
    height: .3rem;
    border: 1px solid #dfdfdf;
    background-color: #fdfdfd;
    border-radius: .2rem;
    cursor: pointer;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    border-color: #dfdfdf;
    -webkit-box-shadow: #dfdfdf 0 0 0 0 inset;
    box-shadow: #dfdfdf 0 0 0 0 inset;
    -webkit-transition: border .4s,-webkit-box-shadow .4s;
    transition: border .4s,box-shadow .4s;
    -webkit-background-clip: content-box;
    background-clip: content-box
}

.ui-switch input:checked:before {
    border-color: #64bd63;
    -webkit-box-shadow: #64bd63 0 0 0 0.16rem inset;
    box-shadow: #64bd63 0 0 0 0.16rem inset;
    background-color: #64bd63;
    transition: border .4s,box-shadow .4s,background-color 1.2s;
    -webkit-transition: border .4s,-webkit-box-shadow .4s,background-color 1.2s;
    background-color: #64bd63
}
.ui-switch input:checked:after {
    left: .4rem
}
.ui-switch input:after {
    content: '';
    width:.3rem;
    height: .3rem;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform:translateY(-50%);
    border-radius: 100%;
    background-color: #fff;
    -webkit-box-shadow: 0 0.01rem 0.03rem rgba(0,0,0,.4);
    box-shadow: 0 0.01rem 0.03rem rgba(0,0,0,.4);
    -webkit-transition: left .2s;
    transition: left .2s
}


版权声明:本文为博主原创文章,未经博主允许不得转载。

css3打造一个switch开关

团队开发项目时,需要用到一个switch开关,原先用的是mui-switch;可是mui-switch在IE下的表现很不好; 于是,自己就动手写一个兼容IE的switch开关; 样式和mui-...
  • hantian616
  • hantian616
  • 2016年08月04日 19:23
  • 1716

HTML/CSS 自定义开关按钮控件(switch)样式

今天这篇文章给大家带来的是在移动端很常见的开关控件。样式主要是通过CSS来定制完成,上一篇博客讲的是自定义滑动条的样式,同样是自定义样式,上一篇是直接通过CSS对 input[type="range"...
  • u013347241
  • u013347241
  • 2016年07月15日 10:57
  • 15260

css3实现switch开关按钮

纯css实现switch开关按钮 Document .mui-switch { width: 52px; height: 31px; position: ...
  • lily2016n
  • lily2016n
  • 2017年03月29日 15:22
  • 1228

html滑动开关按钮实现

html滑动开关按钮
  • wendysunday123
  • wendysunday123
  • 2016年03月16日 15:12
  • 5410

html滑动开关按钮

按钮滑动开关 *{ margin: 0; padding: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-ser...
  • qq604598861
  • qq604598861
  • 2016年09月17日 23:42
  • 464

HTML+CSS+JS实现左边栏滑动框带关闭按钮

这段时间公司做新的网站,一些小功能自然落到了我的头上,可是我只会编程呀,WEB前端设计,CSS样式只是知道一点点,但是我还是“连抄带偸”实现了功能,直接上代码。 Panshiqu b...
  • panshiqu
  • panshiqu
  • 2013年04月17日 10:02
  • 2104

[css]switch开关按钮,适用于移动端和IE9火狐谷歌

pc 火狐 ie9 谷歌 switch 开关 按钮
  • hamupp
  • hamupp
  • 2017年05月10日 01:35
  • 635

css编写移动端switch开关

效果图: html: label class="switch"> input type="checkbox"> i>i> ...
  • y389278443z
  • y389278443z
  • 2017年11月21日 17:43
  • 66

HMTL实现类移动端的滑动开关——前端掉坑记

为了把开关做得更加美观,不用之前一直用的简单的打勾的checkbox,而是要做成像手机选项开关那种样式。效果图如下:首先,你可能搜不到我这篇文章,因为,你不知道这个叫滑动开关。我拿着这东西去问前端,他...
  • iaiti
  • iaiti
  • 2016年06月17日 18:43
  • 2970

JQuery实现滑动开关效果

 Demo效果如下,点击绿色椭圆小块,实现可滑动和动画效果,不是图片切换。                      HTML结构代码: [html] view pla...
  • liuchuan__________
  • liuchuan__________
  • 2015年09月17日 17:11
  • 5559
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:纯CSS3实现滑动开关效果
举报原因:
原因补充:

(最多只允许输入30个字)