您现在的位置是：网站首页> 编程资料编程资料

使用纯css实现开关效果如何用css3实现switch组件开关的方法CSS3实现的多组创意互动式开关切换按钮动画特效源码CSS3美化单选/复选/开关按钮样式特效源码纯CSS3实现漂亮的点击开关切换动画效果源码纯CSS3实现的炫酷checkbox复选框美化库checkboxes.css(含开关按钮美化纯css3实现的仿窗帘拉开关闭百叶窗动画特效源码CSS3模拟IOS滑动开关效果纯CSS3实现精美的滑动开关按钮特效纯CSS3简单的滑动开关按钮特效源码纯CSS3实现的开关按钮动画特效源码

2021-09-03 1175人已围观

简介这篇文章主要介绍了使用纯css实现开关效果,需要的朋友可以参考下

首先是构思

我们使用标签来实现这个效果。

checkbox的选中、未选中的特性，刚好对应开关的打开、关闭

on:打开 off:关闭

未选中，则关闭开关
选中，则打开开关

开始画出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隐藏起来哦

可以点击预览 https://codepen.io/Ritr/pen/W...

另外我还优化了一个动画版

https://codepen.io/Ritr/pen/L...

总结

以上所述是小编给大家介绍的使用纯css实现开关效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

上一篇：Css实现清除浮动的方法汇总CSS 清除浮动与BFC的方法css overflow: hidden 的用法(溢出隐藏及清除浮动)CSS实现元素浮动和清除浮动的方法什么是BFC？ CSS 使用伪元素清除浮动的方法轻松搞懂CSS浮动与清除浮动图文详解css 如何清除浮动的示例代码CSS清楚浮动clear:both的实例代码

下一篇：css轻松实现固定比例的块级容器css实现一个元素高度固定宽度按比例显示效果

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢