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::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 100px;
      z-index: -1;
      width: 100%;
    }

    label:hover {
      background: light-dark(
        color-mix(in srgb, canvasText, #0000 95%),
        color-mix(in srgb, canvasText, #fff0 75%)
      );
    }

    /* the labels that precede a checked option */
    label:has(+ :not(:checked) ~ :checked)::before {
      transform: translateX(100%);
    }

    /* the last checked that comes after the current checked */
    label:has(+ [data-current-checked='true']) ~ label::before {
      transform: translateX(-100%);
    }

    
    label:has(+ [data-previous-checked='true'])::before,
    label:has(+ [data-current-checked='true'])::before {
      background: light-dark(#000, #fff);
      transition: transform calc(var(--duration, 0.2) * 1s) ease-out;
    }
  }
  [data-style='hop'][data-wrap='true'] {
    fieldset:first-of-type:has(:nth-of-type(3)) {
      label:has(+ [data-current-checked='true']):first-of-type ~ label:last-of-type::before {
        transform: translateX(100%);
      }
      label:not(:has(+ [data-current-checked='true'])):first-of-type:has(
          ~ input:last-of-type:checked
        )::before {
        transform: translateX(-100%);
      }
    }
  }
}

@layer anchor {
  @supports (not (anchor-name: --active)) {
    .fields {
      position: relative.........完整代码请登录后点击上方下载按钮下载查看