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