css怎样实现开关结果
发布时间:09/01 来源:未知 浏览:
关键词:
第一是构想:
我们运用标签来实现这个结果。
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怎样实现开关结果的细致内容,更多请关注 百分百源码网 其它相干文章!