如何利用css实现开关效果-创新互联

如何利用css实现开关效果?为了让大家更加了解css,小编给大家总结了以下内容,一起往下看吧。

目前创新互联已为上千多家的企业提供了网站建设、域名、虚拟主机、网站托管、服务器租用、企业网站设计、南漳网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

如何利用css实现开关效果

首先是构思:

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

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; }

效果:

如何利用css实现开关效果

然后我们将这两个草图放到label内



效果:

如何利用css实现开关效果

结合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; }

效果:

如何利用css实现开关效果

到此为止就已经基本实现一个开关的功能了,记得将input隐藏起来哦。

以上就是如何利用css实现开关效果的详细内容了,看完之后是否有所收获呢?如果如果想了解更多,欢迎来创新互联行业资讯!创新互联是一家业内资深的专业云计算服务提供商哦,如果想购买云服务器,香港服务器,美国服务器等产品的,可以多多关注哦。


分享文章:如何利用css实现开关效果-创新互联
当前URL:http://myzitong.com/article/csdgei.html