gsap实现横向悬浮边框发光文字卡片拖拽滚动效果代码-html代码-BFW代码库

代码语言：html

代码描述：gsap实现横向悬浮边框发光文字卡片拖拽滚动效果代码

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

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

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


  
  
<style>
@font-face {
  font-family: "Geist Sans";
  src: url("//repo.bfw.wiki/bfwrepo/font/GeistVF.ttf") format("truetype");
}

:root {
        --card-size: clamp(350px, 40vw, 450px);
        --card-ar: 2 / 1;
        --x: calc(50vw * 1);
        --y: calc((50vh - (var(--card-size) * 0.25)) * 1);
        --spotlight: 50vmin;
        --backdrop: black;
  --radius: 14;
  --border: 3;
  --backup-border: hsl(0 0% 10% / 0.2);
  --size: 200;
  --bg-spot-opacity: 0.16;
  --border-light-opacity: 1;
  --border-spot-opacity: 0.75;
}

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

body {
        display: grid;
        place-items: center;
        min-height: 100vh;
  overflow: hidden;
        background: hsl(0 0% 2%);
        font-family: "Geist Sans", sans-serif;
        font-weight: 80;
        color: hsl(0 0% 100%);
}

article {
  aspect-ratio: var(--card-ar);
  border-radius: calc(var(--radius) * 1px);
  display: grid;
  gap: 1rem;
  grid-template: 1fr 1fr 1fr / 1fr auto;
  padding: 2rem;
  position: relative;
  width: var(--card-size);
}

article *::-moz-selection {
  background: hsl(var(--hue) 80% 40%);
}

article *::selection {
  background: hsl(var(--hue) 80% 40%);
}

/* Article layout */

article > div {
        align-content: center;
        display: grid;
        font-size: 1.5rem;
        gap: 0 3rem;
        grid-column: 1 / -1;
        grid-template: 1fr 1fr / auto 1fr;
}

article hr {
        grid-column: 1 / -1;
        -webkit-mask: linear-gradient(90deg, transparent, white 15% 85%, transparent);
                mask: linear-gradient(90deg, transparent, white 15% 85%, transparent);
        width: 100%;
}

article > div span {
        font-size: 1.25rem;
        font-weight: 20;
        opacity: 0.65;
}

article svg {
        grid-row: span 2;
        width: 48px;
        color: hsl(var(--hue) calc(var(--sat, 0) * 1%) 50%);
}

article > span:first-of-type {
        font-weight: 40;
        opacity: 0.65;
}
article > span:last-of-type {
        font-weight: 60;
}

h2 {
        font-size: 1.5rem;
        font-weight: 80;
        margin: 0;
}

ul {
        display: flex;
        gap: 4rem;
        margin: 0;
        -webkit-mask: linear-gradient(90deg, transparent, white, transparent);
                mask: linear-gradient(90deg, transparent, white, transparent);
        overflow: auto;
        padding-block: 2rem;
        padding-inline: calc(50vw - (var(--card-size) * 0.5));
        -ms-scroll-snap-type: x mandatory;
            scroll-snap-type: x mandatory;
        width: 100%;
}

li {
        display: grid;
        place-items: center;
        scroll-snap-align: center;
        position: relative;
}

li::after {
        --border-size: calc(var(--border) * 1px);
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(
    calc(var(--spotlight) * 0.15) calc(var(--spotlight) * 0.15) at
    calc(var(--px, 0) * 1px) calc(var(--py, 0) * 1px),
    hsl(0 0% 100% / 1), transparent
  );
  background-color: var(--backdrop, transparent);
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-position: 50% 50%;
  background-attachment: fixed;
  background-color: transparent;
        border: var(--border-size) solid transparent;
        border-radius: calc(var(--radius) * 1px);
        -webkit-mask:
    linear-gradient(transparent, transparent),
    linear-gradient(white, white);
                mask:
    linear-gradient(transparent, transparent),
    linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
          mask-clip: padding-box, border-box;
  -webkit-mask-composite: source-in, xor;
          mask-composite: intersect;
}


section {
        width: 100vw;
}

section::after,
section::before {
        content: "";
        position: fixed;
        top: 50%;
        left: 50%;
        background: radial-gradient(hsl(var(--base, 0) 80% 50%), transparent);
        filter: blur(100px);
        width: calc(var(--card-size) * 1.5);
        aspect-ratio: 1;
        translate: -50% -50%;
        border-radius: 50%;
        opacity: 0.0875;
        pointer-events: none;
        z-index: -1;
}

section::after {
        width: calc(var(--card-size) * 0.5);
        opacity: 0.25;
        z-index: 2;
        translate: -50% -75%;
}

@supports (animation-timeline: scroll()) {
        @property --base {
                inherits: true;
                syntax: '<number>';
                initial-value: 0;
        }
        @-webkit-keyframes change-accent {
                to {
                        --base: 320;
                }
        }
        @keyframes change-accent {
                to {
                        --base: 320;
                }
        }
        @property --sat {
                inherits: true;
                syntax: '<number>';
                initial-value: 0;
        }
        @-webkit-keyframes saturate {
.........完整代码请登录后点击上方下载按钮下载查看