js+css实现背景灯光照射格子跟随鼠标效果代码-html代码-BFW代码库

js+css实现背景灯光照射格子跟随鼠标效果代码

代码语言：html

所属分类：其他

代码描述：js+css实现背景灯光照射格子跟随鼠标效果代码

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

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

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

  
  
<style>
.filter {
  top: 50%;
  left: 50%;
  position: fixed;
  width: max(75vw, 75vh);
  aspect-ratio: 1;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
      -ms-user-select: none !important;
          user-select: none !important;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%) scaleY(-1);
  z-index: 100;
  --_m1: radial-gradient(
  	rgb(255 255 255 / 1) 0%,
  	rgb(255 255 255 / 0.5) 40%,
  	rgb(255 255 255 / 0) 65%,
  	rgb(255 255 255 / 0) 100%
  );
  --_m: radial-gradient(
  	rgb(0 0 0 / 0.9) 0%,
  	rgb(0 0 0 / 0.5) 40%,
  	rgb(0 0 0 / 0) 65%,
  	rgb(0 0 0 / 0) 100%
  );
  -webkit-mask-box-image: var(--_m1);
  mask-border: var(--_m1);
  mix-blend-mode: overlay;
  -webkit-backdrop-filter: brightness(4) url(#filter);
          backdrop-filter: brightness(4) url(#filter);
}

.card {
  --border-radius: 2rem;
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  z-index: unset;
  background-color: black;
  border-radius: var(--border-radius);
  -webkit-backdrop-filter: blur(1rem);
          backdrop-filter: blur(1rem);
}
.card:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius);
  z-index: -1;
  background-image: linear-gradient(122.12deg, #166496 0%, #961664 100%);
  --b: 0.5;
  filter: brightness(var(--b));
  transition: all calc(1s / 16 * 4) ease-in-out;
  --border: 4;
  --alpha: 0;
  --gradient: linear-gradient(122.12deg, #166496 0%, #961664 100%);
  --bg-size: calc(100% + (2px * var(--border)));
  background: var(--gradient) center center/var(--bg-size) var(--bg-size);
  border: calc(var(--border) * 1px) solid transparent;
  -webkit-mask: linear-gradient(hsl(0 0% 100%/var(--alpha)), hsl(0 0% 100%/var(--alpha))), linear-gradient(white, white);
          mask: linear-gradient(hsl(0 0% 100%/var(--alpha)), hsl(0 0% 100%/var(--alpha))), linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
          mask-clip: padding-box, border-box;
  -webkit-mask-composite: source-in, xor;
          mask-composite: intersect;
}
.card:hover:after {
  --b: 1;
  isolation: isolate;
}

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