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

代码语言:html

所属分类:其他

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

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

网友评论0