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

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

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