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..........完整代码请登录后点击上方下载按钮下载查看