gsap+svg实现可调参数的容量单选滑动动画效果代码-html代码-BFW代码库

gsap+svg实现可调参数的容量单选滑动动画效果代码

代码语言：html

代码描述：gsap+svg实现可调参数的容量单选滑动动画效果代码

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

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

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

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
      rel="stylesheet"
    />
  
  
  
<style>

@layer normalize, base, prototype, anchor, hop, knockout;

@layer knockout {
  .svg-mask {
    outline-offset: -2px;
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
    z-index: 2;
    translate: 0 100%;
  }

  [data-knockout='mask'][data-style='anchor'] fieldset:first-of-type > div {
    -webkit-mask: var(--svg-mask, initial);
            mask: var(--svg-mask, initial);
  }

  [data-knockout='none'] .mask-layer,
  [data-knockout='mask'] .mask-layer {
    display: none;
  }
  [data-knockout='filter'][data-style='anchor'] {
    .mask-layer {
      filter: url(#knockout-black);
    }
    @media (prefers-color-scheme: dark) {
      .mask-layer {
        filter: url(#knockout-white);
      }
    }
  }
}

@layer hop {
  [data-match='true'][data-style='hop'] {
    label::before {
      inset: unset;
      top: 0;
      left: 0;
      bottom: 0;
      width: max(var(--pill-width-current, 100%), var(--pill-width-previous, 100%));
    }
    label:has(+ :not(:checked) ~ :checked)::before,
    label:has(+ [data-current-checked='true']):has(~ [data-previous-checked='true'])::before {
      right: 0;
      left: unset;
    }
    label:has(+ [data-previous-checked='true'])
      ~ label:has(+ [data-current-checked='true'])::before,
    label:has(+ [data-current-checked='true']) ~ label::before {
      left: 0;
      right: unset;
    }
  }
  [data-style='hop'] {
    label {
      position: relative;
      background: #0000;
      overflow: hidden;
    }
    label::be.........完整代码请登录后点击上方下载按钮下载查看