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(--border)))
      ) -50%;
    transition-property: scale;
    transition-duration: var(--transition);
    transition-timing-function: var(--ease);
    /* transform: scale(var(--scale-x, 1), var(--scale-y, 1)); */
  }
  .indicator__liquid :is(.cover, .shadow) {
    transition: opacity var(--transition) var(--ease);
  }
  /* these are the actual changes when we scale up */
  /* these should also with a [data-active=true] when [data-debug=true] */
  [data-active='true'] .indicator--masked .mask,
  .liquid-toggle:active .indicator--masked .mask {
    height: calc((100% - (2 * var(--border))) * 1.65);
    width: calc((60% - (2 * var(--border))) * 1.65);
    margin-left: calc((60% - (2 * var(--border))) * -0.325);
    /* we can't use scale because of Safari flashing the mask color on change... */
    /* scale: 1.65; */
  }
  [data-active='true'] .indicator__liquid,
  .liquid-toggle:active .indicator__liquid {
    scale: 1.65;
  }

  [data-active='true'] .wrapper,
  .liquid-toggle:active .wrapper {
    filter: blur(0px);
  }

  [data-active='true'] .indicator__liquid .shadow,
  .liquid-toggle:active .indicator__liquid .shadow {
    opacity: 1;
  }

  [data-active='true'] .indicator__liquid .cover,
  .liquid-toggle:active .indicator__liquid .cover {
    opacity: 0;
  }

  [data-active='true'] .indicator__liquid .liquid__track,
  .liquid-toggle:active .indicator__liquid .liquid__.........完整代码请登录后点击上方下载按钮下载查看