纯css实现开关效果

时间：2023-03-31 01:35:01 CSS

大家好，我又来了，这次就给大家介绍如何用纯css实现开关效果。第一个想法是我们使用标签来实现这种效果。checkbox的checked和unchecked特性刚好对应开关的打开和关闭on:openoff:close如果不是选中，关闭开关
如果选中，打开开关开始绘制off和on状态的草图。这里我会说明定位是通过position实现的。不懂的同学可以打开MDN查看相关知识

offstatesketch

onstatesketch

.toggle{display:inline-block;职位：相对；高度：25px；宽度：50px；边界半径：4px；背景：#CC0000；}.cookie{位置：绝对；左：2px；顶部：2px；底部：2px；宽度：50%；背景：rgba(230,230,230,0.9);半径：3px；}.toggle2{显示：内联块；职位：相对；高度：25px；宽度：50px；填充：2px；边界半径：4px；背景：#66CC33；:2px;顶部：2px；底部：2px；宽度：50%；背景：rgba(230,230,230,0.9);border-radius:3px;}然后我们将这两个草图放在标签内
结合label和checkbox整理、优化css

.toggle-finish{cursor:pointer;显示：内联块；职位：相对；高度：25px；宽度：50px；边界半径：4px；背景：#CC0000；}.cookie-finish{位置：绝对；左：2px；顶部：2px；底部：2px；宽度：50%；背景：rgba(230,230,230,0.9);border-radius:3px;}input:checked+.toggle-finish{背景：#66CC33;}input:checked+.toggle-finish.cookie-finish{left:auto;正确的：2px;}至此基本实现了一个开关的功能，记得隐藏输入，可以点击预览https://codepen.io/Ritr/pen/W...另外我还优化了一个动画版https://codepen.io/Ritr/pen/L...

上一篇：好程序员web前端教程分享异步加载CSS的一些方法

下一篇：别笑！JS和JAVA的区别，一张图让你秒懂！

纯css实现开关效果相关文章