纯CSS实现滑动开关带动画效果

CHECKBOX HACK

checkbox hack允许我们在纯css中切换处理程序。它依赖于一个checkbox(可能是选中状态也可能是未选中状态)，:checked伪元素和一个兄弟选择器(~ 或 +)。通俗的讲，checkbox hack的描述是：如果checkbox被选中，那么接下来的某个元素的行为是如此如此...

在过去的技术中，都是使用一个带有id的checkbox和一个带有for的label来组成一个系统。这个新技术允许我们隐藏checkbox而通过label来切换checkbox的状态。这项技术的唯一缺点是 mobile Safari 不支持它。

工作原理：通过透明度使checkbox不可见，然后将它放置在你想放置的任何地方，比如放在label上面。当点击了label你实际上是点击了checkbox，并且允许触发checkbox的点击事件。

html代码

<div class="switch" style="white-space: normal !important">
<input id="new3" type="checkbox" class="switch-input"  value="02" />
<label for="new3" class="switch-label">Switch</label>
</div>

css代码

.switch {
  position: relative;
  display: inline-block;
}
.switch-input {
  display: none;
}
.switch-label {
  display: block;
  width: 48px;
  height: 24px;
  text-indent: -150%;
  clip: rect(0 0 0 0);
  color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.switch-label::before,
.switch-label::after {
  content: "";
  display: block;
  position: absolute;
  cursor: pointer;
}
.switch-label::before {
  width: 100%;
  height: 100%;
  background-color: #dedede;
  border-radius: 9999em;
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
}
.switch-label::after {
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  -webkit-transition: left 0.25s ease;
  transition: left 0.25s ease;
}
.switch-input:checked + .switch-label::before {
  /* background-color: #89c12d; */
  background-color: #0078a5;
}
.switch-input:checked + .switch-label::after {
  left: 24px;
}

效果参照浏览器信息里面的切换深色主题功能，