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;
}

利用css3动画效果编写滑动按钮开关

代码: css3做的滑动开关效果 .switch{ width: 100px; margin: 100px 0px 0 100px; } .bt...

css3实现switch开关按钮

纯css实现switch开关按钮 Document .mui-switch { width: 52px; height: 31px; position: ...

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

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

纯CSS3打造各式Checkbox开关按钮

纯CSS3打造各式Checkbox开关按钮 来源:mxria.com  时间:2012-09-21   图片展示的案例完全通过css3代码实现,未使用到任何图片,是不是超有现实感?咱...

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

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

纯CSS3左右滑动开关按钮

  • 2014年06月14日 01:16
  • 2KB
  • 下载

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

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

CSS---checkbox美化,ios风格的开关按钮

CSS---checkbox美化,ios风格的开关按钮这段时间工作的新需求,是做一个类似IOS开关按钮。用来显示是否选中。 如: 默认未选中 默认选中CSS中通过:before、:after...
  • J_Y_X_8
  • J_Y_X_8
  • 2016年04月19日 16:38
  • 944
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS利用checkbook实现开关按钮
举报原因:
原因补充:

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