参考链接：https://zhuanlan.zhihu.com/p/41726464?utm_source=qq&utm_medium=social&utm_oi=1010468739178987520

结构部分

样式部分

/* 背景层 */.switch-component {  position: relative;  width: 60px;  height: 30px;  background-color: #dadada;  border-radius: 30px;  border: none;  outline: none;  -webkit-appearance: none;  transition: all .2s ease;}/* 按钮 */.switch-component::after {  content: '';  position: absolute;  top: 0;  left: 0;  width: 50%;  height: 100%;  background-color: #fff;  border-radius: 50%;  transition: all .2s ease;}/* 选中状态时，背景色切换 */.switch-component:checked {  background-color: #86c0fa; }/* 选中状态时，按钮的位置移动 */.switch-component:checked::after {  left: 50%;}