gsap+svg实现可调参数的分页滑动效果代码-html代码-BFW代码库

gsap+svg实现可调参数的分页滑动效果代码

代码语言：html

代码描述：gsap+svg实现可调参数的分页滑动效果代码

下面为部分代码预览，完整代码请点击下载或在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, prototype, bridge;

@layer bridge {
  @supports (anchor-name: --pagination) {
      /* gap bridging... */
    [data-bridge=true][data-debug=true] {
      li:has(+ li.pagination__gap) a::after,
      li.pagination__gap + li a::after {
        opacity: 1;
      }  
    }
    [data-bridge=true] {
      li:has(+ li.pagination__gap) a::after,
      li.pagination__gap + li a::after {
        position: absolute;
        content: '';
        opacity: 0;    
        border: 1px solid currentColor;
        background: repeating-linear-gradient(45deg, color-mix(in hsl, currentColor, #0000) 0 1px, #0000 1px 5px);
      }
      li:has(+ li.pagination__gap) a::after {
        inset: 0 -50% 0 100%;
        color: hsl(320 90% 75%);
      }
      li.pagination__gap + li a::after {
        color: hsl(220 90% 75%);
        inset: 0 100% 0 -50%;
      }
    }
  } 
}

@layer prototype {
  .pagination {
    --size: 36px;
    --inset: 2px;
    position: relative;

    .pagination__list {
      display: flex;
      list-style: none;
      align-items: center;
      padding: 0;
      margin: 0;

      li {
        width: var(--size);
        aspect-ratio: 1;
        display: grid;
        place-items: center;

        a {
          display: grid;
          place-items: center;
          color: inherit;
          text-decoration: none;
          width: 100%;
          height: 100%;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
          position: relative;
          outline-color: canvasText;
          -webkit-tap-highlight-color: #0000;
          @media (prefers-reduced-motion: no-preference) {
            transition: color 0.2s ease-out, opacity 0.2s ease-out;
          }


          &[aria-current=page] {
            color: light-dark(#fff, #000);
          }
          
          &.pagination__link--disabled {
            opacity: 0.3;
            cursor: not-allowed;
            pointer-events: none;
          }
        }
      }
    }
  }
  @supports not (anchor-name: --active-page) {
    .pagination a.pagination__link:not(.pagination__link--arrow) {
      &::before, &::after {
        content: '';
        position: absolute;
        inset: var(--inset);
        border-radius: calc(var(--pagination-radius) * 1px);
        background: light-dark(color-mix(in srgb, canvasText 10%, canvas), color-mix(in srgb, canvasText 20%, canvas));
        z-index: -1;
        opacity: 0;
      }

      &[aria-current=page]::before {
        background: light-dark(#000, hsl(0, 0%, 80%));
      }

      &:hover:not([aria-current=page])::before,
      &[aria-c.........完整代码请登录后点击上方下载按钮下载查看