一组精美的纯CSS3滑动开关按钮

简要教程

这是一组使用CSS3制作的精美滑动开关按钮特效。这组滑动按钮按Bootstrap的情景类来设计，可以适应5种不同的场景，以及一种不可用的状态。

 使用方法

 HTML结构

该滑动按钮效果的基本HTML结构使用一个

元素来包裹一个元素和两个元素。

<div class="switch-box">
  <input id="default" class="switch-box-input" type="checkbox" />
  <label for="default" class="switch-box-slider"></label>
  <label for="default" class="switch-box-label">Default</label>
</div>

CSS样式

第一个元素.switch-box-slider用于制作滑动按钮的滑动轴。

.switch-box .switch-box-slider {
  position: relative;
  display: inline-block;
  height: 8px;
  width: 32px;
  background: #d5d5d5;
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.switch-box-slider元素的::after伪元素用于制作圆形的滑块。

.switch-box .switch-box-slider:after {
  position: absolute;
  left: -8px;
  top: -8px;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eeeeee;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  content: '';
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

当.switch-box-input元素处于checked状态时，.switch-box-slider的:after伪元素的left属性被修改，圆形滑块被移动。

.switch-box .switch-box-input ~ .switch-box-label {
  margin-left: 8px;
}
.switch-box .switch-box-input:checked ~ .switch-box-slider:after {
  left: 16px;
}

以上就是一组精美的纯CSS3滑动开关按钮的内容，更多相关内容请关注PHP中文网（www.php.cn）！

相关标签：

CSS3，开关按钮，滑动

来源：php.cn

上一篇：纯CSS3 Android样式按钮点击波特效 下一篇：jQuery和CSS3 3D旋转项目展示模板

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

• 从零开始打造自己的PHP框架的视频资料
  2023-03-15 16:54:01
• PHPMailer如何利用QQ邮箱完成邮件发送功能的实例分析
  2023-03-15 12:26:02
• php中关于IMAP如何收取邮件的方法介绍
  2023-03-14 18:58:01
• php如何快速实现数组去重的实例
  2023-03-14 11:30:01
• html中关于<a>标签的全部属性的使用总结
  1970-01-01 08:00:00
• php基础知识总结（新手入门必备）
  2023-03-16 15:20:01
• JavaScript中typeof的使用方法介绍
  1970-01-01 08:00:00
• JavaScript中confirm()方法的使用介绍
  1970-01-01 08:00:00
• HTML5 Placeholder属性的详情介绍
  1970-01-01 08:00:00
• ReactJS中表单的单选多选与反选的实现方法
  1970-01-01 08:00:00

最新问题

如何制作折叠的侧边栏？ 我无法将主要内容移至左侧。当我单击打开按钮时，下面的代码使正文内容向右移动：functionopenNav(){document.getElementById("mySi...

来自于 2024-04-02 10:02:05

0

2

347

滚动事件侦听器添加到元素，但只有当scrollTop不等于0时才能正确移动 所以我编写了这个小脚本，其中有两个列表-已完成/活动任务，您可以通过点击按钮切换任务列表，也可以通过点击“更多信息”阅读有关任务的更多信息。当点击更多信息时，创建了一个新的div元...

来自于 2024-04-01 11:03:26

0

1

326

单击按钮时如何将此动画类添加到模式中？ 我希望当我单击模态上的“x”按钮时发生动画，但当前发生的情况是模态在没有它的情况下关闭，然后再次打开模态时，动画会在不单击任何内容的情况下发生。这是我当前的动画类代码：.scale...

来自于 2024-03-30 22:05:19

0

1

370

相关专题

更多>

• css3教程
• 有哪些css3渐变属性
• pycharm写的程序如何保存
• 静态网页和动态网页的区别
• android权限限制怎么解开
• 字符串常量的表示方法
• c++保留小数点后几位的方法
• c语言get函数的用法