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