通过css3实现开关选择按钮
发布在前端大锅饭2017年1月8日view:1531
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

通过css属性实现如图所示按钮

要点:通过checkbox选中与否的状态与兄弟选择器实现相关功能 1.设置开关大小并设置定位方式为relative .swift-btn { position: relative; display: inline-block; width: 50px; height: 25px; }

2.设置checkbox属性,并设置为不可见状态 .swift-btn input[type='checkbox'] { position: absolute; width: 50px; height: 25px; opacity: 0; z-index: 9; outline: none; } 3.设置按钮样式,通过伪类元素实现,并添加过渡动画 .swift-btn > label{ position: absolute; display: inline-block; width: 50px; height: 25px; border-radius: 25px; border: 1px solid #ddd; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .swift-btn > label:before { content: ''; position: absolute; display: inline-block; left: 40px; width: 25px; height: 25px; border-radius: 20px; line-height: 25px; text-indent: -1px; } .swift-btn > label:after { content: ''; position: absolute; display: inline-block; width: 24px; height: 24px; left: 0; top: 1px; border-radius: 1px; box-shadow:2px 0px 1px #ddd; border-radius: 15px; background-color: #fff; transition: left 0.3s ease; -webkit-transition: left 0.3s ease; -moz-transition: left 0.3s ease; }

web前端免费学习资料,搜【WEB前端互动交流群】 4.设置input选中后的样式 .swift-btn input[type='checkbox']:checked + label{ border: 1px solid #000; background-color: #000; } .swift-btn input[type='checkbox']:checked + label::before { display: inline-block; color: #fff; text-indent: -25px; } .swift-btn input[type='checkbox']:checked + label::after { left: 26px; top: 1px; width: 24px; height: 24px; border: 0; box-shadow: none; box-sizing: content-box; }

完整代码示例 <!DOCTYPE html> <html> <meta charset='utf-8'>

<style> .swift-btn { position: relative; display: inline-block; width: 50px; height: 25px; } .swift-btn input[type='checkbox'] { position: absolute; width: 50px; height: 25px; opacity: 0; z-index: 9; outline: none; } .swift-btn > label{ position: absolute; display: inline-block; width: 50px; height: 25px; border-radius: 25px; border: 1px solid #ddd; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .swift-btn > label:before { content: ''; position: absolute; display: inline-block; left: 40px; width: 25px; height: 25px; border-radius: 20px; line-height: 25px; text-indent: -1px; } .swift-btn > label:after { content: ''; position: absolute; display: inline-block; width: 24px; height: 24px; left: 0; top: 1px; border-radius: 1px; box-shadow:2px 0px 1px #ddd; border-radius: 15px; background-color: #fff; transition: left 0.3s ease; -webkit-transition: left 0.3s ease; -moz-transition: left 0.3s ease; } .swift-btn input[type='checkbox']:checked + label{ border: 1px solid #000; background-color: #000; } .swift-btn input[type='checkbox']:checked + label::before { display: inline-block; color: #fff; text-indent: -25px; } .swift-btn input[type='checkbox']:checked + label::after { left: 26px; top: 1px; width: 24px; height: 24px; border: 0; box-shadow: none; box-sizing: content-box; } </style>

<body> <input type="checkbox" name="" id='checkbox' /> <label class="" for='checkbox'></label> </body> </html> web前端免费学习资料,搜【WEB前端互动交流群】

评论
发表评论
暂无评论
WRITTEN BY
PUBLISHED IN
前端大锅饭

平台每天更新最实用,最新颖的网页设计、网站制作技巧精品文章,分享html+css、JavaScript、jQuery,ps等直播课录像,国内知名设计师亲授!无论你身在何处,和大家一起来利用零碎的时间学习知识,涨见识、涨工资吧!

我的收藏