CSS利用checkbook实现开关按钮
来源:互联网 发布:安卓改头像软件图片 编辑:程序博客网 时间:2024/06/04 23:21
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;
}
1 0
- CSS利用checkbook实现开关按钮
- 纯css实现开关按钮(滑块)
- 开关按钮实现
- 开关按钮的实现
- 开关按钮的实现
- 实现开关按钮
- 纯css编写开关按钮
- 利用vbs类实现css按钮
- 利用CSS实现按钮效果(无图片)
- html滑动开关按钮实现
- ToggleButton按钮实现开关效果
- CSS3实现开关按钮效果
- MFC 利用checkbox 做成切换开关按钮
- MFC 利用checkbox 做成切换开关按钮
- Css 仿iOS的开关按钮
- HTML+CSS+JS发光开关按钮
- 利用CSS3实现开关样式
- CSS实现iphone式开关
- 线性子空间
- java
- 从头认识java-9.8 栈(Stack)
- Android使用SVG矢量图打造酷炫动效!
- 1.Android AlertDialog
- CSS利用checkbook实现开关按钮
- iOS多线程技术
- 圈奶牛<计算几何><C++>
- [IOS开发]模仿微博的客户端(1)
- 【试错】——人类不断学习、进步的前提
- java IO流的简单介绍及应用
- leetcode 58:Length of Last Word
- VcXsrv: 一个好用的Windows X11 Server
- Invalid header signature问题产生的原因及解决方法