css实现ios开关

效果

css

.checkbox2::before {
 border-radius: 31px;
  width: 102px;
  height: 62px;
  background-color: #e9e9eb;
  outline: none;
}
.checkbox2 {
  border-radius: 31px;
  width: 102px;
  height: 62px;
  background-color: #e9e9eb;
  outline: none;
  position: relative;
  -webkit-appearance: none;
  cursor: pointer;
  transition: all 100ms;
}

.checkbox2:checked {
  background-color: red;
}
.checkbox2::after {
  position: absolute;
  left: 4px;
  top: 4px;
  border-radius: 27px;
  width: 54px;
  height: 54px;
  background-color: #fff;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  content: "";
  transition: all 300ms cubic-bezier(0.4, 0.4, 0.25, 1.35);
}
.checkbox2:checked::after {
  -webkit-transform: translateX(40px);
}

html:

<input class="checkbox2" onclick="aaa(event)" type="checkbox" name="">

=======================================================
再分享一个好看的按钮划过样式
css:

#draw-border {
display: flex;
  align-items: center;
  justify-content: center;
  display: inline-block;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
  text-transform: uppercase;
  color: #4361ee;
  font-weight: bold;
  position: relative;
  outline: none;
  padding: 10px 20px;
  box-sizing: border-box;
}

button::before, button::after {
  box-sizing: inherit;
  position: absolute;
  content: '';
  border: 2px solid transparent;
  width: 0;
  height: 0;
}

button::after {
  bottom: 0;
  right: 0;
}

button::before {
  top: 0;
  left: 0;
}

button:hover::before, button:hover::after {
  width: 100%;
  height: 100%;
}

button:hover::before {
  border-top-color: #4361ee;
  border-right-color: #4361ee;
  transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
}

button:hover::after {
  border-bottom-color: #4361ee;
  border-left-color: #4361ee;
  transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
}

html:

<div id="draw-border">
   <button>Hover me</button>
</div>

效果: gif不会搞 自己去划吧…