div+css实现鼠标悬浮多个长方形变色渐变效果代码-html代码-BFW代码库

div+css实现鼠标悬浮多个长方形变色渐变效果代码

代码语言：html

所属分类：悬停

代码描述：div+css实现鼠标悬浮多个长方形变色渐变效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
* {
  margin: 0;
}

html, body, div {
  display: grid;
}

html {
  overflow: hidden;
  height: 100%;
  background: #000;
}

body {
  overflow: hidden;
}

.grid {
  grid-template-columns: repeat(var(--n), max-content);
  margin: 0 auto;
}

.cell {
  --abs-i: max(var(--ki) - var(--i), var(--i) - var(--ki));
  --abs-j: max(var(--kj) - var(--j), var(--j) - var(--kj));
  --rel-i: calc(1 - var(--abs-i)/var(--n));
  --rel-j: calc(1 - var(--abs-j)/var(--n));
  --sum: calc(var(--rel-i)*var(--rel-i) + var(--rel-j)*var(--rel-j));
  --sqr: var(--sum);
  --bdw: calc(17.5vmin/var(--n));
  box-sizing: border-box;
  z-index: calc(var(--abs-i) + var(--abs-j));
  border: solid var(--bdw) transparent;
  width: calc(100vmin/var(--n));
  border-radius: calc(var(--bdw) + 5px);
  transform: scale(calc(1 + var(--sqr)*.25));
  --hue: calc(180 + (1 - .5*var(--sqr.........完整代码请登录后点击上方下载按钮下载查看