纯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 相关文章推荐
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
JavaScript ES 模块的使用
Nov 12 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
如何将数据从文本导入到mysql
2006/10/09 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
ThinkPHP之getField详解
2014/06/20 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Python turtle画图库&&画姓名实例
2020/01/19 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
5.1手机促销活动
2014/01/17 职场文书
高中生自我评语大全
2014/01/19 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
书香校园活动方案
2014/02/28 职场文书
高中军训感言600字
2014/03/11 职场文书
乳制品整治工作方案
2014/05/29 职场文书
项目申请汇报材料
2014/08/16 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
销售员自我评价
2015/03/11 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers