码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-06-26 16:09:21      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:view   tran   content   tps   ref   document   init   code   line   

技术图片

在线演示

话不多说,上代码:

<!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>

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

标签:view   tran   content   tps   ref   document   init   code   line   

原文地址:https://www.cnblogs.com/henrylin/p/13194965.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!