纯 css3 打造一个switch开关

设计思路 :

  1. 首先使用 label 将 input 包裹,这样就会自动绑定 input,再将 input 隐藏
  2. 使用 :checked 选择器实现开关的动态效果(开关打开时应用:checked的样式,关闭时应用正常的样式),而按钮的变化使用了 css3 的transform来实现的,再结合 transition 实现切换动画效果
  3. 使用 i:after 来模拟按钮,i:before 来改变开关的背景色。之所以要使用 i:after 来模拟按钮,是因为 i:before 在渲染的时候会覆盖 i,且不能通过 z-index 改变覆盖顺序

简单实现:

<label class="iSwitch">
  <input type="checkbox">
  <i></i>
</label>
.iSwitch
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  border-radius: 15px;
  background: #dcdcdc;
  border:1px solid #dcdcdc;
  box-shadow: 0 0 5px #dcdcdc;
  overflow: hidden;
  vertical-align: middle;
  input
    visibility: hidden;
    &:checked + i
      transform: translateX(100%);
    &:checked + i::before
      width: 200%;
  i
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    transition: .1s all linear;
    &::after
      content: "";
      position: absolute;
      display: inline-block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 100%;
      background: #fff;
      z-index: 2;
    &::before
      content: "";
      position: absolute;
      left: -100%;
      top: 0;
      width: 0;
      height: 100%;
      background: #61cafd;
      transition: .1s all linear;

参考资料

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress