利用CSS3怎样做switch组件开关的效果

发布时间：2023-09-27 14:50:46 所属栏目：语言来源：

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

原理

checkbox, 有两种状态, 没选中和选中, 当选中的时候(:checked), 改变样式即可, 首先得清除浏览器默认的样式, apperance: none, 本文代码

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

原理

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%;

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!