百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> css怎样实现开关结果
分享文章到:

css怎样实现开关结果

发布时间:09/01 来源:未知 浏览: 关键词:
本文为大家介绍了css实现开关结果的办法,拥有一定的参照 价值,但愿可以帮忙到大家。可以运用<inputtype"checkbox">标签来实现此结果。

第一是构想:

我们运用标签来实现这个结果。

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怎样实现开关结果的细致内容,更多请关注 百分百源码网 其它相干文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板