gsap实现运动鞋商品主图幻灯片聚光灯交互效果代码-html代码-BFW代码库

代码语言：html

所属分类：电商

代码描述：gsap实现运动鞋商品主图幻灯片聚光灯交互效果代码

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

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

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

  <link
      href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />
  
  
  
<style>
@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize, base, demo, arrow;

@layer arrow {
  .arrow {
    mix-blend-mode: difference;
    font-family: 'Gloria Hallelujah', cursive;
    font-size: 0.875rem;
    position: absolute;
    left: 135%;
    bottom: 65%;
    rotate: 26deg;
    transition: filter 0.26s ease-out, opacity 0.26s ease-out;
    filter: blur(4px);
    pointer-events: none;
    line-height: 1.5;
    z-index: 100;
    opacity: 0;

    span {
      white-space: nowrap;
    }
    svg {
      top: calc(100% + 0.5rem);
      position: absolute;
      translate: -50% 0;
      scale: -1 -1;
      left: -1rem;
      width: 60px;
    }
  }
  [data-reveal] .arrow {
    opacity: 0.7;
    filter: blur(0px);
  }
}

@layer base {
  html {
    color-scheme: dark;
  }

  *,
  *:after,
  *:before {
    box-sizing: border-box;
  }

  body {
    background: light-dark(#fff, #000);
    display: grid;
    place-items: center;
    padding-block: 1rem;
    min-height: 100vh;
    font-family: 'Noto Sans', 'SF Pro Text', 'SF Pro Icons', 'AOS Icons',
      'Helvetica Neue', Helvetica, Arial, sans-serif, system-ui;
  }

  body::before {
    --size: 45px;
    --line: color-mix(in hsl, canvasText, transparent 80%);
    content: '';
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: linear-gradient(
          90deg,
          var(--line) 1px,
          transparent 1px var(--size)
        )
        calc(var(--size) * 0.36) 50% / var(--size) var(--size),
      linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0%
        calc(var(--size) * 0.32) / var(--size) var(--size);
    -webkit-mask: linear-gradient(-20deg, transparent 50%, white);
            mask: linear-gradient(-20deg, transparent 50%, white);
    top: 0;
    transform-style: flat;
    pointer-events: none;
    z-index: -1;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

@layer demo {
  .grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: calc(100vw - 2rem);
    margin: 0 auto;
    position: relative;
  }

  .card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 100%;
    width: 320px;
    aspect-ratio: 390 / 450;
    background: hsl(0 0% 22%);
    padding: 4px;
    position: relative;
    -webkit-tap-highlight-color: #0000;
    border-radius: 24px;
    cursor: pointer;
    box-shadow: 0 1px 0 0 hsl(0 0% 100% / 0.08) inset,
      0 0 0 1px hsl(0 0% 100% / 0.06), 0 4px 12px -4px hsl(0 0% 0% / 0.6);

    &:is(:hover, :has(:focus-visible)) .card__body::before {
      opacity: 1;
      transition-delay: var(--hover-delay);
    }

    &:is(:hover, :has(:focus-visible)) a {
      background: #000;
      box-shadow: none;
      transition-delay: var(--hover-delay);
    }

    &:is(:hover, :has(:focus-visible)) .icons {
      translate: 50% 0;
      transition: translate 0.16s var(--hover-delay) ease-out;

      svg {
        opacity: 1;
        transition-delay: var(--hover-delay);
      }
    }

    h2 {
      display: grid;

      span:first-of-type {
        text-transform: uppercase;
        font-size: 0.675rem;
        font-weight: 800;
        color: #9a9a99;
      }

      span:last-of-type {
        font-size: 1.5rem;
      }
    }
  }

  .card:has(a:focus-visible) {
    outline: 2px solid white;
    outline-offset: 2px;
  }

  /* ── Card stack + reveal ── */
  .card-stack {
    display: grid;
    transform-style: preserve-3d;
    perspective: 200px;

    > * {
      grid-area: 1 / 1;
      transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    }
  }

  .card--blueprint {
    --print-line: hsl(210 0% 40% / 1);
    background: hsl(210 0% 100% / 0.1);
    pointer-events: none;
    transform: translate3d(0, 0, -50px);
    cursor: default;
    &,
    * {
      position: relative;
      &::before,
      &::after {
        content: '';
        position: absolute;
        border: 1px solid var(--print-line);
        inset: min(-10px, -5%) 0;
        -webkit-clip-path: inset(2px 0 2px 0);
                clip-path: inset(2px 0 2px 0);
        z-index: 10;
      }
      &::after {
        inset: 0 min(-10px, -5%);
        border: 1px solid var(--print-line);
        -webkit-clip-path: inset(0 2px 0 2px);
                clip-path: inset(0 2px 0 2px);
      }
    }

    .card__body a {
      overflow: visible;
      background: #0000;
      border: 1px solid var(--print-line);
      box-shadow: none;
      .icons {
        width: 100%;
        grid-template-columns: 1fr;

        svg path {
          fill: none;
          stroke: none;
        }
      }
    }

    .card__spotlight-carousel > ul {
      -ms-scroll-snap-type: none;
          scroll-snap-type: none;
      overflow: hidden;
    }

    img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
    }

    .card__body {
      flex: 1.........完整代码请登录后点击上方下载按钮下载查看