css实现线条填充式开关checkbox切换动画效果代码-html代码-BFW代码库

css实现线条填充式开关checkbox切换动画效果代码

代码语言：html

代码描述：css实现线条填充式开关checkbox切换动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
  
<style>
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  min-height: 100vh;
  font-size: 50px;
  gap: 0.25em;
}

.toggle {
  --color: #000;
  --color2: #fff;
  --time: 0.35s;
  --p00: -2.5em;
  --p01: -2.5em;
  --p02: -2.5em;
  --p03: -2.5em;
  --p04: -2.5em;
  --p05: -2.5em;
  --p06: -2.5em;
  --p07: -2.5em;
  --p08: -2.5em;
  --p09: -2.5em;
  --p10: -2.5em;
  --p11: -2.5em;
  --p12: -2.5em;
  --p13: -2.5em;
  --p14: -2.5em;
  --p15: -2.5em;
  --p16: -2.5em;
  --p17: -2.5em;
  --p18: -2.5em;
  --p19: -2.5em;
  
  color: var(--color);
  appearance: none;
  position: relative;
  font-size: 1em;
  box-sizing: content-box;
  height: 1em;
  width: 2.5em;
  border: max(1px, 0.05em) solid;
  background:
    linear-gradient(var(--color2) 0 0) calc(100% - 0.2em) 50% / 0.6em 0.6em,
    linear-gradient(var(--color) 0 0) var(--p00) 0.00em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p01) 0.05em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p02) 0.10em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p03) 0.15em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p04) 0.20em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p05) 0.25em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p06) 0.30em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p07) 0.35em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p08) 0.40em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p09) 0.45em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p10) 0.50em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p11) 0.55em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p12) 0.60em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p13) 0.65em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p14) 0.70em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p15) 0.75em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p16) 0.80em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p17) 0.85em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p18) 0.90em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) var(--p19) 0.95em / 100% 0.06em,
    linear-gradient(var(--color) 0 0) 0.2em 50% / 0.6em 0.6em
    ;
  background-repeat: no-repeat;
      transition: 
      --p00 var(--time) 0.00s linear,
      --p01 var(--time) 0.01s ease-in,
      --p02 var(--time) 0.02s ease-out,
      --p03 var(--time) 0.03s ease-in-out,
      --p04 var(--time) 0.04s ease,
      --p05 var(--time) 0.05s cubic-bezier(0.1, 0.7, 1, 0.1),
      --p06 var(--time) 0.06s linear,
      --p07 var(--time) 0.07s ease-in,
      --p08 var(--time) 0.08s ease-out,
      --p09 var(--time) 0.09s ease-in-out,
      --p10 var(--time) 0.10s ease,
      --p11 var(--time) 0.11s cubic-bezier(0.1, 0.7, 1, 0.1),
      --p12 var(--time) 0.12s linear,
      --p13 var(--time) 0.13s ease-in,
      --p14 var(--time) 0.14s ease-out,
      --p15 var(--time) 0.15s ease-in-out,
      --p16 var(--time) .........完整代码请登录后点击上方下载按钮下载查看