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 40.5643 15.603 40.7426 15.603 40.8912C15.603 41.0942 15.6798 41.1958 15.8333 41.1958C16.0711 41.1958 16.3088 41.1437 16.5465 41.0397C16.7892 40.9357 17.0195 40.807 17.2374 40.6534C17.4553 40.495 17.6559 40.3365 17.8392 40.178C18.0224 40.0145 18.1784 39.8759 18.3072 39.762C18.4459 39.6381 18.5622 39.5762 18.6563 39.5762C18.7752 39.5762 18.8346 39.6381 18.8346 39.762C18.8346 39.7966 18.8272 39.8363 18.8124 39.8808C18.7975 39.9254 18.7579 39.9824 18.6935 40.0517C18.6142 40.1408 18.5003 40.2572 18.3518 40.4009C18.2081 40.5445 18.0397 40.698 17.8466 40.8614C17.6584 41.0249 17.4529 41.1784 17.23 41.322C17.0121 41.4657 16.7867 41.5845 16.554 41.6786C16.3261 41.7678 16.1033 41.8124 15.8853 41.8124C15.5882 41.8124 15.3579 41.7282 15.1945 41.5598C15.036 41.3864 14.9567 41.1487 14.9567 40.8466C14.9567 40.6584 14.9864 40.4306 15.0459 40.1631C15.1053 39.8957 15.1796 39.6134 15.2687 39.3162C15.3628 39.0141 15.4569 38.7194 15.551 38.4322C15.3926 38.5411 15.2192 38.7046 15.031 38.9225C14.8478 39.1355 14.6546 39.3781 14.4516 39.6505C14.2485 39.918 14.0454 40.1904 13.8424 40.4677C13.6443 40.7451 13.4511 41.0026 13.2629 41.2403C13.0797 41.4731 12.9088 41.6613 12.7503 41.8049C12.5918 41.9486 12.4556 42.0204 12.3417 42.0204Z" fill="black" />
	<path d="M19.4407 41.7604C19.1485 41.7604 18.9182 41.6489 18.7498 41.426C18.5815 41.2032 18.4973 40.9134 18.4973 40.5569C18.4973 40.4281 18.5146 40.2919 18.5493 40.1483C18.5889 39.9997 18.6384 39.866 18.6978 39.7471C18.6632 39.7124 18.6359 39.6654 18.6161 39.606C18.5963 39.5416 18.5864 39.4623 18.5864 39.3682C18.5864 39.076 18.6359 38.8086 18.735 38.5659C18.834 38.3232 18.9653 38.1127 19.1287 37.9344C19.2922 37.7512 19.4729 37.61 19.671 37.511C19.8741 37.4119 20.0796 37.3624 20.2876 37.3624C20.6294 37.3624 20.9067 37.4862 21.1197 37.7339C21.3326 37.9765 21.4391 38.348 21.4391 38.8482C21.4391 39.1107 21.3995 39.3781 21.3203 39.6505C21.246 39.9229 21.142 40.1854 21.0082 40.438C20.8795 40.6906 20.7284 40.9159 20.5551 41.114C20.3867 41.3121 20.2059 41.4706 20.0128 41.5895C19.8246 41.7034 19.6339 41.7604 19.4407 41.7604ZM19.1882 39.4945C19.2179 39.5341 19.2327 39.5861 19.2327 39.6505C19.2327 39.7248 19.2179 39.7991 19.1882 39.8734C19.1634 39.9477 19.1362 40.0492 19.1064 40.178C19.0767 40.3068 19.0619 40.49 19.0619 40.7277C19.0619 40.9655 19.156 41.0843 19.3442 41.0843C19.5522 41.0843 19.7453 41.0026 19.9236 40.8392C20.1019 40.6708 20.2604 40.4553 20.3991 40.1928C20.5377 39.9304 20.6442 39.6505 20.7185 39.3534C20.7978 39.0513 20.8374 38.7665 20.8374 38.499C20.8374 38.3257 20.8052 38.2044 20.7408 38.135C20.6764 38.0607 20.56 38.0236 20.3916 38.0236C20.2183 38.0236 20.0375 38.083 19.8493 38.2019C19.6661 38.3158 19.5126 38.4718 19.3887 38.6699C19.2649 38.868 19.203 39.0909 19.203 39.3385C19.203 39.393 19.1981 39.445 19.1882 39.4945Z" fill="black" />
	<path d="M23.1621 41.5003C23.0878 41.5003 23.0135 41.4459 22.9393 41.3369C22.8699 41.2279 22.8179 41.0744 22.7832 40.8763C22.7486 40.6683 22.7164 40.4306 22.6867 40.1631C22.657 39.8957 22.6322 39.6332 22.6124 39.3757C22.5926 39.1181 22.5777 38.8903 22.5678 38.6922C22.5579 38.4941 22.5529 38.3604 22.5529 38.291C22.5529 38.0335 22.5926 37.8428 22.6718 37.719C22.756 37.5902 22.8625 37.5258 22.9913 37.5258C23.0804 37.5258 23.1448 37.5506 23.1844 37.6001C23.224 37.6447 23.2438 37.7487 23.2438 37.9122C23.2438 38.0211 23.2463 38.1623 23.2513 38.3356C23.2562 38.5089 23.2637 38.6971 23.2736 38.9002C23.2835 39.1429 23.2934 39.4004 23.3033 39.6728C23.3132 39.9403 23.3206 40.2052 23.3256 40.4677C23.4444 40.2696 23.5806 40.0492 23.7342 39.8065C23.8926 39.5639 24.0536 39.3162 24.217 39.0636C24.3805 38.8061 24.539 38.5609 24.6925 38.3282C24.846 38.0954 24.9822 37.8923 25.1011 37.719C25.2199 37.5457 25.3116 37.4194 25.376 37.3401C25.4601 37.2411 25.5369 37.1717 25.6063 37.1321C25.6805 37.0925 25.7449 37.0727 25.7994 37.0727C25.8737 37.0727 25.9331 37.0999 25.9777 37.1544C26.0272 37.2089 26.052 37.2856 26.052 37.3847C26.052 37.4441 26.0396 37.511 26.0148 37.5853C25.995 37.6546 25.9579 37.7264 25.9034 37.8007C25.7697 38.0038 25.6087 38.2415 25.4205 38.5139C25.2323 38.7863 25.0367 39.0686 24.8336 39.3608C24.6306 39.653 24.4325 39.9378 24.2393 40.2151C24.0462 40.4875 23.8778 40.7277 23.7342 40.9357C23.4816 41.3121 23.2909 41.5003 23.1621 41.5003Z" fill="black" />
	<path d="M29.4161 38.3653C29.4161 38.6823 29.2651 38.9893 28.963 39.2865C28.6609 39.5837 28.2003 39.8561 27.5812 40.1037C27.5614 40.2275 27.5515 40.3315 27.5515 40.4157C27.5515 40.6138 27.5762 40.7574 27.6258 40.8466C27.6802 40.9357 27.7694 40.9803 27.8932 40.9803C28.0765 40.9803 28.282 40.9234 28.5098 40.8094C28.7376 40.6906 28.9729 40.5395 29.2156 40.3.........完整代码请登录后点击上方下载按钮下载查看