当前位置：主页 > 查看内容

如何用css3实现switch组件开关的方法

发布时间：2021-07-25 00:00| 有 位朋友查看

简介：本文介绍了用css3实现switch组件的方法，分享给大家，具体如下： 基于表单的checkbox 效果图 原理 checkbox, 有两种状态, 没选中和选中, 当选中的时候(:checked), 改变样式即可, 首先得清除浏览器默认的样式, apperance: none, 本文代码只在chrome中运行, 如……

本文介绍了用css3实现switch组件的方法，分享给大家，具体如下：

基于表单的checkbox

效果图

原理

checkbox, 有两种状态, 没选中和选中, 当选中的时候(:checked), 改变样式即可, 首先得清除浏览器默认的样式, apperance: none, 本文代码只在chrome中运行, 如果需要写兼容性代码, 给apperance和transition加上前缀就好

html代码

<input class='switch-component' type='checkbox'>

css代码

// switch组件
.switch-component {
  position: relative;
  width: 60px;
  height: 30px;
  background-color: #dadada;
  border-radius: 30px;
  border: none;
  outline: none;
  -webkit-appearance: none;
  transition: all .2s ease;
}

// 按钮
switch-component::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #fff;
  border-radius: 50%;
  transition: all .2s ease;
 }

// checked状态时，背景颜色改变
.switch-component:checked {
  background-color: #86c0fa;
}

// checked状态时，按钮位置改变
.switch-component:checked::after {
  left: 50%;
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。


原文链接：https://m.jb51.net/css/599765.html
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：纯css3使用vw和vh实现自适应的方法 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐