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 {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background-color: #161620;
  color: white;
  margin: 0;
  isolation: isolate;
  gap: 1rem;
  padding: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(25vw, 1fr));
  background-color: #161620;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 160 80'%3E%3Cg fill='%23202024' %3E%3Cpolygon points='0 10 0 0 10 0'/%3E%3Cpolygon points='0 40 0 30 10 30'/%3E%3Cpolygon points='0 30 0 20 10 20'/%3E%3Cpolygon points='0 70 0 60 10 60'/%3E%3Cpolygon points='0 80 0 70 10 70'/%3E%3Cpolygon points='50 80 50 70 60 70'/%3E%3Cpolygon points='10 20 10 10 20 10'/%3E%3Cpolygon points='10 40 10 30 20 30'/%3E%3Cpolygon points='20 10 20 0 30 0'/%3E%3Cpolygon points='10 10 10 0 20 0'/%3E%3Cpolygon points='30 20 30 10 40 10'/%3E%3Cpolygon points='20 20 20 40 40 20'/%3E%3Cpolygon points='40 10 40 0 50 0'/%3E%3Cpolygon points='40 20 40 10 50 10'/%3E%.........完整代码请登录后点击上方下载按钮下载查看