css如何实现开关效果-css教程-PHP中文网

css如何实现开关效果

首先是构思：

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

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

on:打开 off:关闭


  
  未选中，则关闭开关




  
  选中，则打开开关

效果：

立即学习“前端免费学习笔记（深入）”；

Asp开源商城系统YothSHOP

YothSHOP是优斯科技鼎力打造的一款asp开源商城系统，支持access和Sql server切换，完善的会员订单管理，全站生成静态html文件，SEO优化效果极佳，后台XP模式和普通模式随意切换，极易操作，欢迎使用！ Asp开源商城系统YothSHOP功能介绍：1.使用静态页和程序页分离技术，网站可自由开启和关闭，实现全站生成静态页，可动静态切换，方便二次开发和后期维护。2.管理员管理：后台

下载

（推荐教程：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视频教程