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 {
		0%, 25%, 75%, 100% {
			--sat: 0;
		}
		50% {
			--sat: 100;
		}
	}
	@keyframes saturate {
		0%, 25%, 75%, 100% {
			--sat: 0;
		}
		50% {
			--sat: 100;
		}
	}
	section {
		timeline-scope: --list;
		-webkit-animation: change-accent both linear;
		        animation: change-accent both linear;
		animation-timeline: --list;
	}
	ul {
    scroll-timeline: --list inline;
	}
	li {
		-webkit-animation: saturate both linear;
		        animation: saturate both linear;
		animation-timeline: view(inline);
	}
}

/* Glow specific styles */
[data-glow] {
  --border-size: calc(var(--border, 2) * 1px);
  --spotlight-size: calc(var(--card-size) * 1.2);
  --hue: calc(var(--base) + (var(--xp, 0) * var(--spread, 0)));
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    var(--x)
    var(--y),
    hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 70) * 1%) / var(--bg-spot-opacity, 0.15)), 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;
  border: var(--border-size) solid var(--backup-border);
  position: relative;
  touch-action: none;
}

[data-glow]::before,
[data-glow]::after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: calc(var(--radius) * 1px);
  background-attachment: fixed;
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -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;
}

/* This is the emphasis light */
[data-glow]::before {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.75) calc(.........完整代码请登录后点击上方下载按钮下载查看