# HTML + CSS 打造 iOS Switch 开关

最近面了一些公司发现自己没什么特长,比较平庸,想了想自己的兴趣,准备做一些好玩有趣的东西,提升一下自己的 CSS 技巧。

立个 flag,暑假之前初步入门 WebGL。

这次做的是一个用 HTML 和 CSS 做的 iOS Switch 开关:

<label for="toggle">
  <input type="checkbox" id="toggle" />
  <span></span>
</label>
:root {
  --wrapper-width: 500px;
  --wrapper-height: 295px;
  --button-width: 255px;
  --button-toggle-width: 333px;
  --padding: calc((var(--wrapper-height) - var(--button-width)) / 2);
}
span {
  position: relative;
  display: inline-block;
  width: var(--wrapper-width);
  height: var(--wrapper-height);
  background-color: #e9e9ea;
  border-radius: calc(var(--wrapper-height) / 2);
  transition: all 0.3s ease-in-out;
}
span::after {
  content: '';
  position: absolute;
  width: var(--button-width);
  height: var(--button-width);
  background-color: #fff;
  border-radius: calc(var(--button-width) / 2);
  top: var(--padding);
  transform: translateX(var(--padding));
  transition: all 0.3s ease-in-out;
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.1);
}
input[type='checkbox']:checked + span {
  background-color: #30d158;
}
input[type='checkbox']:active + span::after {
  width: var(--button-toggle-width);
}
input[type='checkbox']:checked + span::after {
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
  transform: translateX(
    calc(var(--wrapper-width) - var(--padding) - var(--button-width))
  );
}
input[type='checkbox']:checked:active + span::after {
  transform: translateX(
    calc(var(--wrapper-width) - var(--padding) - var(--button-toggle-width))
  );
}
input[type='checkbox'] {
  display: none;
}

最终效果点击此处查看