纯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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
网上抓的一个特效
May 11 Javascript
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 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+ajax实时刷新简单实例
2015/02/25 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
laravel5.6实现数值转换
2019/10/23 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
原生javascript实现图片按钮切换
2015/01/12 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
js实现楼层导航功能
2017/02/23 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
Python读写Redis数据库操作示例
2014/03/18 Python
用python实现面向对像的ASP程序实例
2014/11/10 Python
python实现周期方波信号频谱图
2018/07/21 Python
python仿抖音表白神器
2019/04/08 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
python实现图像拼接功能
2020/03/23 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
中东奢侈品市场:Coveti
2019/05/12 全球购物
介绍一下gcc特性
2012/01/20 面试题
医药营销个人求职信
2014/04/12 职场文书
2014年计生标语
2014/06/23 职场文书
科技工作者先进事迹
2014/08/16 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
2014年消防工作总结
2014/11/21 职场文书
小学生运动会广播
2015/08/19 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers