这篇文章给大家分享的是用CSS实现打开关闭功能的示例。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

    首先是构思

    我们使用<input type="checkbox">标签来实现这个效果。

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

    on:打开 off:关闭

<label for="ck2">
  <input type="checkbox" id="ck2">
  <span>未选中，则关闭开关</span>
</label>
<br>
<label for="ck1">
  <input type="checkbox" id="ck1" checked>
  <span>选中，则打开开关</span>
</label>

    开始画出off、on状态的草图

    这里要讲解一下，使用了position来实现的定位。有不了解的同学可以打开MDN查看相关知识

<P>off状态草图</P>
<div class="toggle">
  <div class="cookie"></div>
</div>
<br>
<P>on状态草图</P>
<div class="toggle2">
  <div class="cookie2"></div>
</div>
.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 for="ck4">
  <input type="checkbox" id="ck4">
  <div class="toggle">
    <div class="cookie"></div>
  </div>
</label>
<br>
<label for="ck3">
  <input type="checkbox" id="ck3" checked>
  <div class="toggle2">
    <div class="cookie2"></div>
  </div>
</label>

    结合label和checkbox整理、优化css

<label for="ck5">
  <input type="checkbox" id="ck5">
  <div class="toggle-finish">
    <div class="cookie-finish"></div>
  </div>
</label>
<br>
<label for="ck6">
  <input type="checkbox" id="ck6" checked>
  <div class="toggle-finish">
    <div class="cookie-finish"></div>
  </div>
</label>
.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实现打开关闭功能的示例就介绍到这，本文代码仅供参考，感兴趣的朋友可以了解看看，希望能对大家有帮助，想要了解更多大家可以关注群英网络其它的相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• HTML如何指定页面和设置页面使用字符集

  这篇文章主要介绍了html 指定页面字符集的两种方法，帮助大家更好的制作网页，感兴趣的朋友可以了解下

• CSS的伪类和伪对象怎样理解，不同在哪

  其中伪类和伪元素（伪对象）的根本区别在于：它们是否创造了新的元素。伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存

• CSS中动画的基础知识是什么，怎样实现奔跑小熊的动画

  CSS如何实现动画一？什么是动画？动画就是一帧又一帧图片,按顺序展现在人的眼前，但是由于人的视觉反应不过来就会产生图画动起来的效果。下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家，下面我们一起来了解看看吧。

• CSS中常用文本和字体样式有哪些？用法是什么？

  本文主要给大家分享CSS中常用文本和字体样式及用法，小编觉得比较使用，对新手学习CSS也有一定的帮助，因此分享给大家做个参考，感兴趣的朋友接下来跟随小编一起来学习一下吧。

• 用CSS怎样实现三角形和箭头的小图标效果？

  用CSS怎样实现三角形和箭头的小图标效果？在网站设计中，我们经常会需要使用到一些小图片，但是如果网站的图片太多，不仅不好管理，而且还会拖累网站的速度，因此，很多时候我们会使用一些简单的标签样式来实现简单的图形标志来替代图片，这篇给大家分享三角形和箭头的小图标效果的实现。