<style>
.on-off {
      --button-width: 500px;
      --button-height: 295px;
      --toggle-diameter: 255px;
      --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
      --toggle-shadow-offset: 10px;
      --toggle-wider: 333px;
      --color-grey: #E9E9E9;
      --color-dark-grey: #39393D;
      --color-green: #30D158;
    }

.on-off {
      display: inline-block;
      width: var(--button-width);
      height: var(--button-height);
      background-color: var(--color-grey);
      border-radius: calc(var(--button-height) / 2);
      position: relative;
      transition: .3s all ease-in-out;
    }

.on-off::after {
      content: '';
      display: inline-block;
      width: var(--toggle-diameter);
      height: var(--toggle-diameter);
      background-color: #fff;
      border-radius: calc(var(--toggle-diameter) / 2);
      position: absolute;
      top: var(--button-toggle-offset);
      transform: translateX(var(--button-toggle-offset));
      box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, .10);
      transition: .3s all ease-in-out;
    }

body {
      display: flex;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      
    }

input[type="checkbox"]:checked + span {
      background-color: var(--color-green);
    }

input[type="checkbox"]:checked + span::after {
      transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
      box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, .10);
    }

input[type="checkbox"] {
      display: none;
    }

input[type="checkbox"]:active + span::after {
      width: var(--toggle-wider);
    }

input[type="checkbox"]:checked:active + span::after {
      transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
    }

@media(prefers-color-scheme: dark) {
    body {
        background-color: #1C1C1E;
      }
      
    span {
        background-color: var(--color-dark-grey);
      }
    }
    </style>

<body>
    <label for="toggle">
      <input type="checkbox" id="toggle">
      <span class="on-off"></span>
    </label>
</body>
Last modification:December 3, 2021
如果觉得我的文章对你有用,请随意赞赏