纯css实现开关效果

dendoink 发布于2019-08-30 11:22 / 1071人阅读

摘要：大家好，我又来了，这次给大家表演使用纯实现开关效果首先是构思我们使用标签来实现这个效果。的选中未选中的特性，刚好对应开关的打开关闭打开关闭未选中，则关闭开关选中，则打开开关开始画出状态的草图这里要讲解一下，使用了来实现的定位。

大家好，我又来了，这次给大家表演使用纯css实现开关效果

首先是构思

我们使用标签来实现这个效果。
checkbox的选中、未选中的特性，刚好对应开关的打开、关闭
on:打开 off:关闭


  
  未选中，则关闭开关




  
  选中，则打开开关

开始画出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隐藏起来哦
可以点击预览https://codepen.io/Ritr/pen/W...
另外我还优化了一个动画版
https://codepen.io/Ritr/pen/L...

GPU云服务器云服务器纯CSS css效果效果显示 css jquery 气球css js效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114950.html

前端每日实战：145# 视频演示如何用纯 CSS 创作一个电源开关控件

摘要：源代码下载每日前端实战系列的全部源代码请从下载代码解读定义，包含个元素，分别代表控件开关和灯光居中显示定义控件的样式，把控件的设置为透明，使其不可见，但仍可与用户交互。 showImg(https://segmentfault.com/img/bVbhwqh?w=400&h=301); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://code...

zhangke3016 2019-08-02 11:35 评论0 收藏0
前端每日实战：145# 视频演示如何用纯 CSS 创作一个电源开关控件

摘要：源代码下载每日前端实战系列的全部源代码请从下载代码解读定义，包含个元素，分别代表控件开关和灯光居中显示定义控件的样式，把控件的设置为透明，使其不可见，但仍可与用户交互。 showImg(https://segmentfault.com/img/bVbhwqh?w=400&h=301); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://code...

ckllj 2019-08-30 15:54 评论0 收藏0
【二次元的CSS】—— 纯CSS3做的能换挡的电扇

摘要：传送门效果是这样的结构小技巧就是，一开始就写了一组单选按钮来做开关的部分。有个地方需要优化，就是在换挡的时候，动画应该柔和些。这次分享的电扇，和以往用css3画人物相比多加了一点交互，就是电扇开关的地方，用到了一点点css3的 :checked +div 这个很少用到的选择器来实现的。 GitHub传送门：https://github.com/lancer07/css3_fan 效...

Cruise_Chan 2019-08-02 15:54 评论0 收藏0
【二次元的CSS】—— 纯CSS3做的能换挡的电扇

摘要：传送门效果是这样的结构小技巧就是，一开始就写了一组单选按钮来做开关的部分。有个地方需要优化，就是在换挡的时候，动画应该柔和些。这次分享的电扇，和以往用css3画人物相比多加了一点交互，就是电扇开关的地方，用到了一点点css3的 :checked +div 这个很少用到的选择器来实现的。 GitHub传送门：https://github.com/lancer07/css3_fan 效...

big_cat 2019-08-30 13:03 评论0 收藏0