纯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 相关文章推荐
原生js实现shift/ctrl/alt按键的获取
Apr 08 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
JavaScript ES6 Class类实现原理详解
May 08 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
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
jquery $("#variable") 循环改变variable的值示例
2014/02/23 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python与R语言的简要对比
2017/11/14 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
某公司.Net方向面试题
2014/04/24 面试题
表演方阵解说词
2014/02/08 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
市场督导岗位职责
2015/04/10 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
Django路由层如何获取正确的url
2021/07/15 Python
MySQL 开窗函数
2022/02/15 MySQL
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript