html滑动开关按钮

HTML滑动开关按钮，通常被称为"Toggle Switch"或"Checkbox Switch"，是一种用户界面元素，用于表示两个状态之间的切换，比如开/关、启用/禁用等。它通常表现为一个可点击的矩形区域，内部有一个小图标，用户可以通过拖动或点击来切换这个状态。

在HTML中，滑动开关通常使用`<input>`标签配合CSS样式来创建，`type="checkbox"`用于定义这是一个复选框，然后通过CSS美化呈现成滑动效果。例如：

<input type="checkbox" id="switch-btn">
<label for="switch-btn">滑动开关</label>

CSS可以添加样式使其看起来像一个滑块：

#switch-btn {
  display: none; /* 隐藏默认的 checkbox */
}
.switch-label {
  position: relative;
  width: 50px;
  height: 24px;
  cursor: pointer;
}
.switch-input {
  opacity: 0; /* 让输入不可见 */
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  content: "";
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: 50%;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: #2196F3; /* 状态改变后的颜色 */
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}