css 滑动按钮切换

可以使用 CSS3 中的 checkbox hack 实现滑动按钮的切换效果，具体步骤如下：

1. 创建一个 checkbox 元素，并设置为隐藏状态。

<input type="checkbox" id="toggle" style="display:none">

2. 创建一个 label 元素，并将其与 checkbox 元素关联。

<label for="toggle">Toggle Button</label>

3. 使用 CSS3 中的伪类 :checked 和 + 选择器来控制 label 元素样式的变化。同时，使用 transition 属性实现按钮的平滑滑动效果。

label {
  display: inline-block;
  width: 50px;
  height: 30px;
  background-color: #ccc;
  border-radius: 15px;
  position: relative;
  transition: background-color 0.3s;
}

label::after {
  content: '';
  display: block;
  width: 25px;
  height: 25px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  transition: left 0.3s;
}

#toggle:checked + label {
  background-color: #69c;
}

#toggle:checked + label::after {
  left: calc(100% - 27.5px);
}

以上代码可以实现一个简单的滑动按钮，可以根据需要进行调整。