自己做了几个可以直接套用的 HTML5 小开关

效果图

在线演示

话不多说，上代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      background: #474747;
    }
    * {
      --on: #24bfa5;
      --off: #7a7a7a;
    }
    .switch {
      background: #fff;
      display: block;
      width: 40px;
      height: 20px;
      margin: 20px 0;
      position: relative;
      cursor: pointer;
      transition: all 0.2s;
    }

    .switch:before,
    .switch:after {
      position: absolute;
      transition: all 0.3s cubic-bezier(0, 0.48, 0.27, 0.98);
    }

    #s1 {
      margin: 25px 5px;
      width: 30px;
      height: 10px;
      border-radius: 5px;
      background: #1e1e1e;
      box-shadow: #0005 0 0 15px inset;
    }

    #s1:hover {
      filter: brightness(130%);
    }

    #s1:active {
      filter: brightness(90%);
    }

    #s1:before {
      content: "";
      height: 20px;
      width: 20px;
      border-radius: 50%;
      top: -5px;
      box-shadow: #0003 0 5px 15px;
    }
    #s1.off:before {
      left: -5px;
      background: var(--off);
    }
    #s1.on:before {
      left: 15px;
      background: var(--on);
    }

    #s2 {
      border-radius: 10px;
    }

    #s2.on {
      background: var(--on);
    }

    #s2.off {
      background: var(--off);
    }
    #s2:after {
      content: "";
      background: #fff;
      width: 10px;
      height: 10px;
      border-radius: 5px;
    }
    #s2.off:after {
      top: 5px;
      left: 5px;
    }
    #s2.on:after {
      top: 5px;
      left: 25px;
    }

    #s2:hover {
      filter: brightness(110%);
    }

    #s2:active {
      filter: brightness(90%);
    }

    #s3 {
      border-radius: 10px;
      background: var(--off);
      overflow: hidden;
    }

    #s3:before {
      content: "";
      width: 40px;
      height: 20px;
      border-radius: 10px;
      background: var(--on);
      top: 0;
      left: 0;
    }

    #s3.off:before {
      width: 20px;
    }

    #s3:after {
      content: "";
      background: #fff;
      width: 20px;
      height: 20px;
      top: 0;
      border-radius: 50%;
      box-shadow: #0008 0 0 25px 5px;
    }
    #s3.off:after {
      left: 0px;
    }
    #s3.on:after {
      left: 20px;
    }

    #s3:hover {
      filter: brightness(110%);
    }

    #s3:active {
      filter: brightness(90%);
    }

    #s4 {
      border-radius: 10px;
      overflow: hidden;
    }

    #s4.on {
      background: var(--on);
    }

    #s4.off {
      background: var(--off);
    }

    #s4:before,
    #s4:after {
      color: #fff;
      line-height: 20px;
      font-size: 13px;
      width: 100%;
      text-align: center;
      text-shadow: #000a 0 0 5px;
    }

    #s4:before {
      content: "ON";
    }

    #s4.on:before {
      top: 0;
    }

    #s4.off:before {
      top: 20px;
    }

    #s4:after {
      content: "OFF";
    }

    #s4.off:after {
      top: 0;
    }

    #s4.on:after {
      top: -20px;
    }

    #s4:hover {
      filter: brightness(110%);
    }

    #s4:active {
      filter: brightness(90%);
    }
  </style>
  <script>
    function turn(a) {
      a.className = a.className == "switch on" ? "switch off" : "switch on";
    }
  </script>
  <body>
    <span id="s1" class="switch off" onclick="turn(this)"></span>
    <span id="s2" class="switch off" onclick="turn(this)"></span>
    <span id="s3" class="switch off" onclick="turn(this)"></span>
    <span id="s4" class="switch off" onclick="turn(this)"></span>
  </body>
</html>

posted on 2020-06-26 14:39  Henrylin666  阅读(302)  评论(0)  编辑  收藏  举报

导航

回到首页
✈