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%);
}

.filter {
	position: fixed;
	bottom: 100%;
	left: 100%;
}

:root:hover {
	--scale: 1;
}

@property --scale {
	initial-value: 0;
	syntax: '<number>';
	inherits: true;
}

.effect {
	width: calc(var(--size) * 1px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: hsl(210 80% 90% / 0.05);
	--blue: color-mix(in lch, canvas, hsl(210 10% 40%));
	border: 2px solid color-mix(in lch, canvasText, var(--blue) 60%);
  inset: unset;
  margin: 0;
	grid-area: 1 / 1;
	-webkit-backdrop-filter: url(#filter);
	        backdrop-filter: url(#filter);
	-webkit-backdrop-filter: url(#scribble--0);
	        backdrop-filter: url(#scribble--0);
	position: fixed;
	top: 0%;
	left: 0%;
  translate:
    calc((var(--x) * 1px) - 50%)
		calc((var(--y) * 1px) - 65%);
	transform: scale(var(--scale, 0));
	pointer-events: none;
	box-shadow:
    0px 4px 16px rgba(17,17,26,0.1),
    0px 8px 24px rgba(17,17,26,0.1),
    0px 16px 56px rgba(17,17,26,0..........完整代码请登录后点击上方下载按钮下载查看