纯CSS3代码实现滑动开关效果


Posted in Javascript onAugust 19, 2015

废话不多说了,炫下效果图并附上演示和源码下载。

实现效果如下:

纯CSS3代码实现滑动开关效果

查看演示      源码下载 

HTML结构代码:

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
}
Javascript 相关文章推荐
javascript new后的constructor属性
Aug 05 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
js实现导航跟随效果
Nov 17 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
JS+DIV实现拖动效果
Feb 11 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
js实现input框文字动态变换显示效果
Aug 19 #Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 #Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 #Javascript
easyui Droppable组件实现放置特效
Aug 19 #Javascript
js实现简单的联动菜单效果
Aug 19 #Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 #Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 #Javascript
You might like
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
Javascript 按位与赋值运算符 (&=)使用介绍
2014/02/04 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
Vue实现简易计算器
2020/02/25 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
Python中的类与对象之描述符详解
2015/03/27 Python
列举Python中吸引人的一些特性
2015/04/09 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
深入浅析Python中的yield关键字
2018/01/24 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
详解Django配置JWT认证方式
2020/05/09 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
2014年小班元旦活动方案
2014/02/16 职场文书
房屋公证委托书
2014/04/03 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
zabbix监控mysql的实例方法
2021/06/02 MySQL