css+js实现可调配置的鼠标跟随放大器效果代码-html代码-BFW代码库

css+js实现可调配置的鼠标跟随放大器效果代码

代码语言：html

所属分类：其他

代码描述：css+js实现可调配置的鼠标跟随放大器效果代码，可设置明暗主题色、放大倍数、放大文字、放大文字是否闪烁等效果。

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

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

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


  
  
<style>
@import "normalize.css";

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

:root {
	--shimmer: color-mix(in lch, white, transparent 35%);
}

[data-theme=dark] { color-scheme: dark only; }
[data-theme=light] { color-scheme: light only; }

body {
	display: grid;
	place-items: center;
	min-height: 100vh;
	touch-action: none;
	font-family:  "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
}

body::before {
	--line: color-mix(in lch, canvasText 25%, transparent);
	--size: 40px;
	content: '';
	height: 100vh;
	width: 100vw;
	position: fixed;
	background: linear-gradient(
				90deg,
				var(--line) 1px,
				transparent 1px var(--size)
			)
			0 -5vmin / var(--size) var(--size),
		linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(
				--size
			) var(--size);
	-webkit-mask: linear-gradient(-15deg, transparent 60%, white);
	        mask: linear-gradient(-15deg, transparent 60%, white);
	top: 0;
	z-index: -1;
}

h1 {
	font-size: clamp(2.5rem, 4vw + 1rem, 8rem);
	font-weight: 600;
	grid-area: 1 / 1;
}

h1::-moz-selection {
	background: hsl(320 100% 50%);
}

h1::selection {
	background: hsl(320 100% 50%);
}

.fi.........完整代码请登录后点击上方下载按钮下载查看