赵走x博客 - 开发者的网上家园

类似IOS的切换器

资源编号:551904 热度：112

# 效果截图

![](http://oldmark.oss-cn-beijing.aliyuncs.com/2023/10/20/38bc04a6-6f15-11ee-92ed-4eb41ed3ca7f/47609e58fd2c42adb65a31eedf90f8bf.png)

# 源码

### HTML源码

```
        <label class="switch">
  <input type="checkbox" />
  <span class="slider"></span>
</label>
        ```

### CSS源码

```
         .switch input {
  display: none;
}

.switch {
  width: 60px;
  height: 30px;
  position: relative;
}

.slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 30px;
  box-shadow: 0 0 0 2px #777, 0 0 4px #777;
  cursor: pointer;
  border: 4px solid transparent;
  overflow: hidden;
  transition: 0.2s;
}

.slider:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background-color: #777;
  border-radius: 30px;
  transform: translateX(-30px);
  /*translateX(-(w-h))*/
  transition: 0.2s;
}

input:checked + .slider:before {
  transform: translateX(30px);
  /*translateX(w-h)*/
  background-color: limeGreen;
}

input:checked + .slider {
  box-shadow: 0 0 0 2px limeGreen, 0 0 8px limeGreen;
}

.switch200 .slider:before {
  width: 200%;
  transform: translateX(-82px);
  /*translateX(-(w-h))*/
}

.switch200 input:checked + .slider:before {
  background-color: red;
}

.switch200 input:checked + .slider {
  box-shadow: 0 0 0 2px red, 0 0 8px red;
}
        ```