开关纯css写

最新推荐文章于 2024-05-18 10:01:50 发布

suzyCai

最新推荐文章于 2024-05-18 10:01:50 发布

阅读量90

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_42080477/article/details/103162336

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

开关 css

<label class="switch">
  <input type="checkbox" checked>
    <div class="slider round"></div>
</label>


.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  &input {
    display: none;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;

    &.round {
      border-radius: 34px;
      &:before {
        border-radius: 50%;
      }
    }
    &:before {
      position: absolute;
      content: "";
      height: 14px;
      width: 14px;
      left: 4px;
      bottom: 0;
      margin: 4px 0;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }
    &:after {
      position: absolute;
      content: "关";
      right: 10px;
      color: #fff;
      font-size: 12px;
      bottom: 0;
    }
  }

  input:checked + .slider {
    background-color: #87D068;
    &:before {
      left: 0;
    }
    &:after {
      content: "开";
      left: 10px;
    }
  }

  input:focus + .slider {
    box-shadow: 0 0 1px #87D068;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
}