首先是构思：
我们使用标签来实现这个效果。
checkbox的选中、未选中的特性，刚好对应开关的打开、关闭
on:打开 off:关闭
登录后复制
效果：
立即学习“前端免费学习笔记（深入）”；
（推荐教程：CSS入门教程）
开始画出off、on状态的草图
这里要讲解一下，使用了position来实现的定位。有不了解的同学可以打开MDN查看相关知识
off状态草图
on状态草图
.toggle{ display:inline-block; position:relative; height:25px; width:50px; border-radius:4px; background:#CC0000;}.cookie{ position:absolute; left:2px; top:2px; bottom:2px; width:50%; background:rgba(230,230,230,0.9); border-radius:3px;}.toggle2{ display:inline-block; position:relative; height:25px; width:50px; padding:2px; border-radius:4px; background:#66CC33; }.cookie2{ position:absolute; right:2px; top:2px; bottom:2px; width:50%; background:rgba(230,230,230,0.9); border-radius:3px;}
登录后复制
效果：
立即学习“前端免费学习笔记（深入）”；
然后我们将这两个草图放到label内
登录后复制
效果：
立即学习“前端免费学习笔记（深入）”；
结合label和checkbox整理、优化css
.toggle-finish{ cursor:pointer; display:inline-block; position:relative; height:25px; width:50px; border-radius:4px; background:#CC0000;}.cookie-finish{ position:absolute; left:2px; top:2px; bottom:2px; width:50%; background:rgba(230,230,230,0.9); border-radius:3px;}input:checked + .toggle-finish{ background:#66CC33; }input:checked + .toggle-finish .cookie-finish{ left:auto; right:2px;}
登录后复制
效果：
到此为止就已经基本实现一个开关的功能了，记得将input隐藏起来哦。
相关视频教程推荐：CSS入门教程
以上就是css如何实现开关效果的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2886501.html
