vecteur+gsap实现粘性拉伸光标效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：vecteur+gsap实现粘性拉伸光标效果代码

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

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

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

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

:root {
	--cursor-size: 24px;
	--background: #f2f2f2;
}

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

a {
	display: block;
}

ul {
	list-style: none;
}

html,
body {
	width: 100%;
	height: 100%;
}

body {
	background: var(--background);
	font-family: "Inter";
	display: grid;
	place-content: center;
}

button {
	outline: none;
	border: none;
	background: inherit;
	color: currentcolor;
	font-size: inherit;
	font-family: inherit;
	cursor: pointer;
}

a {
	text-decoration: none;
	color: currentcolor;
}

main {
	height: 100%;

	> div {
		display: flex;
		gap: 6rem;
	}
}

.btn {
	--size: 40px;
	width: var(--size);
	height: var(--size);
	position: relative;
	display: grid;
	place-content: center;

	svg {
		width: 100%;
		height: 100%;
		pointer-events: none;
	}
}

[data-hover] {
	position: relative;

	[data-hover-bounds] {
		position: absolute;
		left: 0;
		top: 0;
		inset: 0;

		/* 		outline: 1px solid red; */
	}

	&:hover {
		[data-hover-bounds] {
			transform: scale(4);
		}
	}
}

.cursor {
	width: var(--cursor-size);
	height: var(--cursor-size);
	border-radius: 50%;

	position: fixed;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);

	background: var(--background);
	mix-blend-mode: difference;
	pointer-events: none;
}

.cta {
	width: 100px;
	position: fixed;
	top: -999px;
	left: -999px;
	pointer-events: none;
}
</style>

  
  
</head>

<body translate="no">
  <main>
	<div>
		<button class="btn menu-btn" data-hover>
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
				<line x1="4" x2="20" y1="12" y2="12" />
				<line x1="4" x2="20" y1="6" y2="6" />
				<line x1="4" x2="20" y1="18" y2="18" />
			</svg>
			<div data-hover-bounds></div>
		</button>

		<button class="btn close-btn" data-hover>
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x">
				<path d="M18 6 6 18" />
				<path d="m6 6 12 12" />
			</svg>
			<div data-hover-bounds></div>
		</button>
	</div>
</main>

<div class="cursor"></div>

<svg class="cta" viewBox="0 0 52 43" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M12.3417 42.0204C12.2328 42.0204 12.1486 41.9882 12.0891 41.9238C12.0297 41.8644 12 41.7133 12 41.4706C12 41.2478 12.0396 40.958 12.1189 40.6014C12.1981 40.2399 12.3046 39.8387 12.4383 39.3979C12.572 38.9572 12.7231 38.5015 12.8915 38.031C13.0599 37.5556 13.2357 37.09 13.4189 36.6344C13.6071 36.1738 13.7879 35.7528 13.9612 35.3714C14.0256 35.2328 14.0925 35.1362 14.1618 35.0817C14.2312 35.0272 14.3129 35 14.407 35C14.4714 35 14.5258 35.0198 14.5704 35.0594C14.6199 35.0941 14.6447 35.1535 14.6447 35.2377C14.6447 35.2674 14.6125 35.364 14.5481 35.5275C14.4887 35.6909 14.4045 35.9063 14.2955 36.1738C14.1915 36.4412 14.0752 36.7409 13.9464 37.0727C13.8176 37.4045 13.6864 37.7537 13.5527 38.1202C13.4189 38.4867 13.2926 38.8556 13.1738 39.2271C13.0549 39.5936 12.9534 39.9452 12.8692 40.282C12.785 40.6188 12.728 40.9209 12.6983 41.1883C12.8172 41.0447 12.9534 40.8614 13.1069 40.6386C13.2604 40.4157 13.4239 40.1755 13.5972 39.918C13.7706 39.6604 13.9464 39.4054 14.1247 39.1528C14.303 38.9002 14.4788 38.6699 14.6521 38.4619C14.8255 38.2539 14.9864 38.088 15.135 37.9642C15.2886 37.8354 15.4223 37.771 15.5362 37.771C15.7244 37.771 15.8754 37.8304 15.9893 37.9493C16.1082 38.0632 16.1676 38.2514 16.1676 38.5139C16.1676 38.6625 16.1379 38.8408 16.0785 39.0488C16.024 39.2568 15.9596 39.4747 15.8853 39.7025C15.8111 39.9304 15.7442 40.1483 15.6848 40.3563C15.6303.........完整代码请登录后点击上方下载按钮下载查看