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.3563C29.4582 40.1681 29.696 39.97 29.9287 39.762C30.1665 39.554 30.3844 39.3583 30.5825 39.1751C30.7806 38.9869 30.949 38.8358 31.0877 38.7219C31.2263 38.603 31.3204 38.5436 31.37 38.5436C31.4393 38.5436 31.4963 38.5758 31.5408 38.6402C31.5854 38.6996 31.6077 38.7813 31.6077 38.8853C31.6077 39.0141 31.6003 39.1627 31.5854 39.3311C31.5705 39.4945 31.5532 39.6679 31.5334 39.8511C31.6622 39.4896 31.8231 39.1751 32.0163 38.9076C32.2144 38.6352 32.4249 38.4099 32.6477 38.2316C32.8706 38.0533 33.0885 37.9196 33.3015 37.8304C33.5145 37.7413 33.6977 37.6967 33.8512 37.6967C33.9949 37.6967 34.1013 37.724 34.1707 37.7784C34.24 37.8329 34.2747 37.8973 34.2747 37.9716C34.2747 38.0409 34.2425 38.1053 34.1781 38.1647C34.1187 38.2192 33.98 38.291 33.7621 38.3802C33.5095 38.4792 33.2718 38.5956 33.0489 38.7293C32.831 38.8631 32.6279 39.0463 32.4397 39.2791C32.2515 39.5069 32.0831 39.8115 31.9346 40.1928C31.786 40.5742 31.6597 41.0645 31.5557 41.6638C31.5359 41.7826 31.5012 41.8668 31.4517 41.9164C31.4022 41.9708 31.3427 41.9981 31.2734 41.9981C31.2239 41.9981 31.1743 41.9758 31.1248 41.9312C31.0753 41.8916 31.0357 41.795 31.0059 41.6415C30.9762 41.483 30.9614 41.2354 30.9614 40.8986C30.9614 40.6708 30.9713 40.4231 30.9911 40.1557C31.0158 39.8883 31.0505 39.6084 31.0951 39.3162C30.8673 39.5639 30.6147 39.8239 30.3373 40.0963C30.06 40.3637 29.7727 40.6138 29.4756 40.8466C29.1784 41.0744 28.8862 41.2601 28.599 41.4038C28.3117 41.5474 28.0443 41.6192 27.7966 41.6192C27.5341 41.6192 27.3237 41.5276 27.1652 41.3443C27.0067 41.1611 26.9274 40.8887 26.9274 40.5271C26.9274 40.1111 26.9819 39.7298 27.0909 39.3831C27.1998 39.0364 27.341 38.7368 27.5143 38.4842C27.6877 38.2266 27.8734 38.0285 28.0715 37.8899C28.2696 37.7512 28.4603 37.6819 28.6435 37.6819C28.8912 37.6819 29.0818 37.7462 29.2156 37.875C29.3493 37.9988 29.4161 38.1623 29.4161 38.3653ZM27.7001 39.5614C27.8486 39.4574 28.0096 39.341 28.1829 39.2122C28.3612 39.0834 28.5123 38.9522 28.6361 38.8185C28.7649 38.6798 28.8293 38.5535 28.8293 38.4396C28.8293 38.3703 28.8119 38.3207 28.7773 38.291C28.7426 38.2613 28.6832 38.2465 28.599 38.2465C28.4652 38.2465 28.3414 38.3133 28.2275 38.447C28.1136 38.5758 28.0121 38.7417 27.9229 38.9448C27.8338 39.1429 27.7595 39.3484 27.7001 39.5614Z" fill="black" />
	<path d="M43.6212 41.4632C43.6162 41.5424 43.584 41.6068 43.5246 41.6563C43.4652 41.7059 43.3958 41.7306 43.3166 41.7306C43.2274 41.7306 43.1532 41.7009 43.0937 41.6415C43.0343 41.5821 43.0046 41.4904 43.0046 41.3666C43.0046 41.0447 43.0194 40.6955 43.0492 40.3191C43.0789 39.9378 43.116 39.5614 43.1606 39.1899C43.2052 38.8135 43.2497 38.4668 43.2943 38.1499C43.1309 38.3827 42.9526 38.6402 42.7594 38.9225C42.5712 39.2048 42.3781 39.4846 42.18 39.762C41.9819 40.0393 41.7887 40.2944 41.6005 40.5271C41.4123 40.755 41.2414 40.9407 41.0879 41.0843C40.9344 41.223 40.8081 41.2923 40.709 41.2923C40.5258 41.2923 40.3673 41.2205 40.2336 41.0769C40.0999 40.9283 40.033 40.7426 40.033 40.5197C40.033 40.4306 40.0429 40.3092 40.0627 40.1557C40.0825 39.9972 40.1048 39.8313 40.1296 39.658C40.1543 39.4846 40.1766 39.3237 40.1964 39.1751C40.2162 39.0215 40.2261 38.9076 40.2261 38.8333C40.2261 38.764 40.2187 38.7046 40.2039 38.655C40.194 38.6006 40.1692 38.5733 40.1296 38.5733C40.0701 38.5733 39.9884 38.6402 39.8844 38.7739C39.7804 38.9027 39.664 39.0686 39.5353 39.2717C39.4114 39.4747 39.2827 39.6901 39.1489 39.918C39.0202 40.1458 38.8988 40.3612 38.7849 40.5643C38.671 40.7624 38.5744 40.9184 38.4952 41.0323C38.4308 41.1413 38.3714 41.2205 38.3169 41.27C38.2624 41.3196 38.1956 41.3443 38.1163 41.3443C38.0222 41.3443 37.9356 41.2948 37.8563 41.1958C37.782 41.0967 37.7449 40.9754 37.7449 40.8317C37.7449 40.7475 37.7597 40.6163 37.7895 40.438C37.8192 40.2547 37.8563 40.0542 37.9009 39.8363C37.9504 39.6183 37.9975 39.4054 38.042 39.1974C38.0916 38.9844 38.1337 38.8036 38.1683 38.655C38.2079 38.4867 38.2575 38.3727 38.3169 38.3133C38.3763 38.2539 38.4407 38.2242 38.5101 38.2242C38.6042 38.2242 38.6784 38.2588 38.7329 38.3282C38.7924 38.3926 38.8221 38.4941 38.8221 38.6328C38.8221 38.6575 38.8072 38.7244 38.7775 38.8333C38.7478 38.9373 38.7106 39.0661 38.6661 39.2196C38.6264 39.3682 38.5819 39.5242 38.5323 39.6877C38.4878 39.8511 38.4506 40.0022 38.4209 40.1408C38.5299 39.9576 38.6438 39.7595 38.7626 39.5465C38.8865 39.3336 39.0103 39.1231 39.1341 38.9151C39.2579 38.7021 39.3817 38.5089 39.5055 38.3356C39.6294 38.1573 39.7507 38.0162 39.8696 37.9122C39.9884 37.8081 40.1023 37.7561 40.2113 37.7561C40.3401 37.7561 40.4589 37.7958 40.5679 37.875C40.6818 37.9542 40.7734 38.0607 40.8428 38.1945C40.9121 38.3282 40.9468 38.4768 40.9468 38.6402C40.9468 38.7541 40.9269 38.9151 40.8873 39.1231C40.8477 39.3261 40.80.........完整代码请登录后点击上方下载按钮下载查看