CSS利用checkbook实现开关按钮

原创 2015年11月18日 20:48:12
1. 默认
<label><input class="mui-switch" type="checkbox"> 默认未选中</label>
<label><input class="mui-switch" type="checkbox" checked> 默认选中</label>

2. 过渡效果1
<label><input class="mui-switch mui-switch-animbg" type="checkbox"></label>
<label><input class="mui-switch mui-switch-animbg" type="checkbox" checked></label>

3. 过渡效果2
<label><input class="mui-switch mui-switch-anim" type="checkbox"></label> 
<label><input class="mui-switch mui-switch-anim" type="checkbox" checked></label>

CSS样式( 虽然看不懂,但是很好用 )
.mui-switch {
    width: 52px;
    height: 31px;
    position: relative;
    border: 1px solid #dfdfdf;
    background-color: #fdfdfd;
    box-shadow: #dfdfdf 0 0 0 0 inset;
    border-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-clip: content-box;
    display: inline-block;
    -webkit-appearance: none;
    user-select: none;
    outline: none;
}
.mui-switch:before {
    content: '';
    width: 29px;
    height: 29px;
    position: absolute;
    top: 0px;
    left: 0;
    border-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.mui-switch:checked {
    border-color: #64bd63;
    box-shadow: #64bd63 0 0 0 16px inset;
    background-color: #64bd63;
}
.mui-switch:checked:before {
    left: 21px;
}
.mui-switch.mui-switch-animbg {
    transition: background-color ease 0.4s;
}
.mui-switch.mui-switch-animbg:before {
    transition: left 0.3s;
}
.mui-switch.mui-switch-animbg:checked {
    box-shadow: #dfdfdf 0 0 0 0 inset;
    background-color: #64bd63;
    transition: border-color 0.4s, background-color ease 0.4s;
}
.mui-switch.mui-switch-animbg:checked:before {
    transition: left 0.3s;
}
.mui-switch.mui-switch-anim {
    transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
}
.mui-switch.mui-switch-anim:before {
    transition: left 0.3s;
}
.mui-switch.mui-switch-anim:checked {
    box-shadow: #64bd63 0 0 0 16px inset;
    background-color: #64bd63;
    transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
}
.mui-switch.mui-switch-anim:checked:before {
    transition: left 0.3s;
}

纯css实现开关按钮(滑块)

在线展示开关按钮 本地下载代码 在线编辑html:
  • erdouzhang
  • erdouzhang
  • 2017年03月17日 09:15
  • 1590

CSS3实现一个开关按钮控件

之前有写过自定义一个复选框的样式。 链接:http://blog.csdn.net/u014291497/article/details/52081774又做了一个左右滑动开关效果的复选框。效果图:...
  • u014291497
  • u014291497
  • 2016年09月06日 22:03
  • 3460

CSS3实现开关按钮效果

CSS3自定义Checkbox特效DEMO演示 .tgl{display:none} .tgl,.tgl *,.tgl :after,.tgl :before,.tgl+.tgl-...
  • KoalaShane
  • KoalaShane
  • 2016年12月20日 14:12
  • 1027

css3实现的简单开关按钮代码实例:

css3实现的简单开关按钮代码实例: 本章节分享一段代码实例,它使用css3实现了开关按钮效果。 代码和网上实用的相比相对粗陋一点,但是完全能够演示它实现的原理。 需要的朋友可以做一下参考,代码...
  • sinat_29891353
  • sinat_29891353
  • 2017年04月14日 15:24
  • 379

Css 仿iOS的开关按钮

用Css仿iOS的开关按钮,微信风格
  • voidmain_123
  • voidmain_123
  • 2016年08月24日 17:09
  • 1668

几个开关效果的CSS实现

在一个web项目上有开关按钮的需求,基于此特做少许功课; 几个简单demo,重点在于使用觉少代码完成此效果,网上可搜到更多酷炫效果,但代码实现较为复杂,大家可以空闲时间研习; 效果图: ...
  • liucyccdt2013
  • liucyccdt2013
  • 2014年12月09日 15:31
  • 334

纯CSS3实现滑动开关效果

实现效果如下: HTML结构代码:       CSS代码: /*表单开关样式*/ ...
  • huangyibin628
  • huangyibin628
  • 2015年08月17日 11:56
  • 5109

css3实现switch开关按钮

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

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

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

js通过图片切换实现开关按钮(一)

一个超级简单的通过JS实现开关按钮
  • l1010288
  • l1010288
  • 2015年04月27日 11:17
  • 695
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS利用checkbook实现开关按钮
举报原因:
原因补充:

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