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

代码语言：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.1),
    0px 4px 16px rgba(17,17,26,0.1) inset,
    0px 8px 24px rgba(17,17,26,0.1) inset,
    0px 16px 56px rgba(17,17,26,0.1) inset;
  transition: --scale 0.5s;
}

.effect svg {
	width: 100%;
	height: 100%;
}

[data-type=magnify] .effect { -webkit-backdrop-filter: url(#filter); backdrop-filter: url(#filter); }
[data-type=radiate] .effect { -webkit-backdrop-filter: url(#scribble--0); backdrop-filter: url(#scribble--0); }

[data-type=radiate][data-animate=true] .effect {
	-webkit-animation: scribble 0.2s infinite linear;
	        animation: scribble 0.2s infinite linear;
}

@-webkit-keyframes scribble {
  0% { -webkit-backdrop-filter: url("#scribble--0"); backdrop-filter: url("#scribble--0"); }
  25% { -webkit-backdrop-filter: url("#scribble--1"); backdrop-filter: url("#scribble--1"); }
  50% { -webkit-backdrop-filter: url("#scribble--2"); backdrop-filter: url("#scribble--2"); }
  75% { -webkit-backdrop-filter: url("#scribble--3"); backdrop-filter: url("#scribble--3"); }
  100% { -webkit-backdrop-filter: url("#scribble--4"); backdrop-filter: url("#scribble--4"); }
}

@keyframes scribble {
  0% { -webkit-backdrop-filter: url("#scribble--0"); backdrop-filter: url("#scribble--0"); }
  25% { -webkit-backdrop-filter: url("#scribble--1"); backdrop-filter: url("#scribble--1"); }
  50% { -webkit-backdrop-filter: url("#scribble--2"); backdrop-filter: url("#scribble--2"); }
  75% { -webkit-backdrop-filter: url("#scribble--3"); backdrop-filter: url("#scribble--3"); }
  100% { -webkit-backdrop-filter: url("#scribble--4"); backdrop-filter: url("#scribble--4"); }
}

.filter {
	width: calc(var(--size) * 1px);
	height: calc(var(--size) * 1px);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.bear-link {
	color: canvasText;
	position: fixed;
	top: 1rem;
	left: 1rem;
	width: 48px;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	opacity: 0.8;
}

:where(.x-link, .bear-link):is(:hover, :focus-visible) {
	opacity: 1;
}
.bear-link svg {
	width: 75%;
}

.eyes {
	transform-box: fill-box;
	transform-origin: center;
	-webkit-animation: blink 6s -2s infinite;
	        animation: blink 6s -2s infinite;
}

@-webkit-keyframes blink {
	0%,
	46%,
	48%,
	50%,
	100% {
		scale: 1 1;
	}
	47%,
	49% {
		scale: 1 0.01;
	}
}

@keyframes blink {
	0%,
	46%,
	48%,
	50%,
	100% {
		scale: 1 1;
	}
	47%,
	49% {
		scale: 1 0.01;
	}
}
</style>


  
  
</head>

<body translate="no">
  <a
      class="bear-link"
      href=""
      target="_blank"
      rel="noreferrer noopener"
    >
    LOGO
    </a>
    <div class="effect">
      <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12.6758 35.6141C14.5653 30.7128 17.4018 26.2318 21.0231 22.4267C24.6445 18.6216 28.9798 15.5671 33.7816 13.4375" stroke="white" stroke-width="6" stroke-linecap="round"/>
      </svg>
    </div>
    <h1>Check It!</h1>
    <svg
      class="filter"
      preserveAspectRatio="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <filter
          id="filter"
          width="100%"
          height="100%"
          x="0"
          y="0"
          color-interpolation-filters="sRGB"
        >
          <feImage
            id="absmap"
            x="0"
            y="0"
            width="100%"
            height="100%"
            result="FE_IMG"
            href="data:image/svg+xml;charset=utf-8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22displacementmap%22%20id%3D%22absolute-displacementmap%22%20width%3D%22256%22%20height%3D%22256%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20.red-gradient%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20url(%23red-gradient)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.blue-gradient%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20url(%23blue-gradient)%3B%0A%20%20%20%20%20%20%.........完整代码请登录后点击上方下载按钮下载查看