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

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

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