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:.........完整代码请登录后点击上方下载按钮下载查看