纯CSS3代码实现滑动开关效果
更新时间:2015年08月19日 10:42:01 投稿:mrr
CSS33D炫酷左右滑动开关按钮是一款非常酷的CSS3 3D开关按钮,点击按钮可以左右滑动,就像开关打开闭合一样的效果,通过本篇文章给大家介绍纯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实现页面滚动图片加载(仿lazyload效果)
网上的很多这样的效果都是用jQuery的方法,可是如果不用jQuery的站长难道就不能用这种方法了么2011-07-07JavaScript数组去重的方法总结【12种方法,号称史上最全】
这篇文章主要介绍了JavaScript数组去重的方法,结合实例形式较为详细的总结分析了12种方法数组去重的方法,需要的朋友可以参考下2019-02-02
最新评论