css实现切换角度线checkbox开关切换效果代码-html代码-BFW代码库

代码语言：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;
}

@property --x0 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --x1 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --x2 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --x3 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --x4 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --x5 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --x6 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --x7 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --x8 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --y0 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --y1 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --y2 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --y3 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --y4 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --y5 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --y6 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --y7 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --y8 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --x10 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --x11 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --x12 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --x13 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --x14 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --x15 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --x16 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --x17 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --x18 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --y10 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --y11 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --y12 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --y13 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --y14 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --y15 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --y16 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --y17 { syntax: '<length>'; initial-value: 1px; inherits: true; }
@property --y18 { syntax: '<length>'; initial-value: 1px; inherits: true; }

.toggle {
  --angle: 45deg;
  --x0: 0.1em;
  --x1: 0.1em;
  --x2: 0.1em;
  --x3: 0.1em;
  --x4: 0.1em;
  --x5: 0.1em;
  --x6: 0.1em;
  --x7: 0.1em;
  --x8: 0.1em;
  --y0: 0.1em;
  --y1: 0.1em;
  --y2: 0.1em;
  --y3: 0.1em;
  --y4: 0.1em;
  --y5: 0.1em;
  --y6: 0.1em;
  --y7: 0.1em;
  --y8: 0.1em;
  --x10: -0.4em;
  --x11: -0.4em;
  --x12: -0.4em;
  --x13: -0.4em;
  --x14: -0.4em;
  --x15: -0.4em;
  --x16: -0.4em;
  --x17: -0.4em;
  --x18: -0.4em;
  --y10: -1.9em;
  --y11: -1.9em;
  --y12: -1.9em;
  --y13: -1.9em;
  --y14: -1.9em;
  --y15: -1.9em;
  --y16: -1.9em;
  --y17: -1.9em;
  --y18: -1.9em;
  
  appearance: none;
  position: relative;
  font-size: 1em;
  box-sizing: content-box;
  border: max(1px, 0.05em) solid currentcolor;
  width: 2.5em;
  height: 1em;
  color: currentcolor;
  transition:
      --x0 0.5s 1s,
      --x1 0.5s 1.1s,
      --x2 0.5s 1.2s,
      --x3 0.5s 1.3s,
      --x4 0.5s 1.4s,
      --x5 0.5s 1.5s,
      --x6 0.5s 1.6s,
      --x7 0.5s 1.7s,
      --x8 0.5s 1.8s,
      --y0 0.5s 1s,
      --y1 0.5s 1.1s,
      --y2 0.5s 1.2s,
      --y3 0.5s 1.3s,
      --y4 0.5s 1.4s,
      --y5 0.5s 1.5s,
      --y6 0.5s 1.6s,
      --y7 0.5s 1.7s,
      --y8 0.5s 1.8s,
      --x10 0.5s 0s,
      --x11 0.5s 0.1s,
      --x12 0.5s 0.2s,
      --x13 0.5s 0.3s,
      --x14 0.5s 0.4s,
      --x15 0.5s 0.5s,
      --x16 0.5s 0.6s,
      --x17 0.5s 0.7s,
      --x18 0.5s 0.8s,
      --y10 0.5s 0s,
      --y11 0.5s 0.1s,
      --y12 0.5s 0.2s,
      --y13 0.5s 0.3s,
      --y14 0.5s 0.4s,
      --y15 0..........完整代码请登录后点击上方下载按钮下载查看