gsap+svg实现液态玻璃可调参数的checkbox开关效果代码-html代码-BFW代码库

gsap+svg实现液态玻璃可调参数的checkbox开关效果代码

代码语言：html

代码描述：gsap+svg实现液态玻璃可调参数的checkbox开关效果代码

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

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

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


  
  
<style>
@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize, base, demo, toggle, debug, transitions;

@layer debug {
  .knockout--debug {
    translate: 0% 200%;
    outline: 4px hotpink dashed;
  }
}

@layer transitions {
  :root {
    --transition: 0.2s;
    --ease: ease-out;
  }
  [data-bounce='true']:has(button:active) {
    --transition: 0.6s;
    --ease: linear(
      0 0%,
      0.6091 3.69%,
      1.0259 7.24%,
      1.1733 9.05%,
      1.283 10.92%,
      1.3562 12.87%,
      1.3948 14.95%,
      1.4014 16.03%,
      1.3999 17.16%,
      1.3731 19.64%,
      1.3202 22.27%,
      1.1394 29.39%,
      1.0582 33.17%,
      0.9943 37.45%,
      0.9734 39.64%,
      0.9593 41.92%,
      0.9505 45.08%,
      0.9517 48.7%,
      0.9924 63.02%,
      1.0046 71.2%,
      1.0061 78.24%,
      1 100%
    );
  }
  .indicator--masked .mask {
    translate: calc(
        (var(--complete) / 100) * (100cqi - 60cqi - (0 * var(--border)))
      ) -50%;
    /* transition-property: scale; */
    /* this would work with scale if not for Safari getting funny about the mask */
    transition-property: height, width, margin, scale;
    transition-duration: var(--transition);
    transition-timing-function: var(--ease);
    will-change: height, width, margin;
  }
  .wrapper {
    -webkit-clip-path: inset(0 0 0 0 round 100px);
            clip-path: inset(0 0 0 0 round 100px);
    filter: blur(6px);
    transition: filter var(--transition) var(--ease);
  }
  [aria-pressed='true']:not([data-active='true']) .liquid__track {
    left: calc(var(--border) * 6);
  }
  .liquid__track {
    left: 0;
    transition-property: height, width, filter, left;
    transition-duration: var(--transition);
    transition-timing-function: var(--ease);
    translate: calc(
        (var(--complete) / 100) * (100cqi - 100% - (6 * var(--border)))
      ) -50%;
  }
  .indicator__liquid {
    translate: calc(
        (var(--complete) / 100) * (100cqi - 100% - (2 * var(-.........完整代码请登录后点击上方下载按钮下载查看