使用css3实现一个滑动开关

滑动开关（也称为切换开关或滑块开关）是 UI 设计中常见的元素，通常用于开启或关闭某个功能。下面是一个简单的示例，说明如何使用 CSS3 和 HTML 创建一个滑动开关：

HTML

<div class="switch">
  <input type="checkbox" id="toggle" class="switch-input">
  <label for="toggle" class="switch-label">
    <span class="switch-slider"></span>
  </label>
</div>

CSS

/* 隐藏原始的 checkbox */
.switch-input {
  display: none;
}

/* 开关容器的样式 */
.switch {
  width: 50px;
  height: 30px;
  position: relative;
  background-color: #ccc;
  border-radius: 15px;
  transition: background-color 0.3s;
}

/* 开关滑块的样式 */
.switch-slider {
  width: 28px;
  height: 28px;
  position: absolute;
  top: 1px;
  left: 1px;
  background-color: white;
  border-radius: 50%;
  transition: left 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 当 checkbox 被选中时，改变开关和滑块的样式 */
.switch-input:checked + .switch-label .switch {
  background-color: #4caf50; /* 你可以更改这个颜色 */
}

.switch-input:checked + .switch-label .switch-slider {
  left: 21px; /* 50px - 28px - 1px = 21px */
}

这个示例创建了一个简单的滑动开关。当 checkbox 被选中时，开关的背景颜色会改变，并且滑块会移动到开关的另一侧。你可以根据需要调整开关和滑块的大小、颜色等样式。