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))*150);
  background: hsl(var(--hue, 150), 100%, 65%) content-box;
  filter: drop-shadow(0 0 5px teal);
  transition: 0.3s;
}
@supports (z-index: sqrt(4)) {
  .cell {
    --sqr: sqrt(var(--sum)) ;
  }
}
</style>



</head>

<body >
  <style>
   
  .cell:nth-child(8n + 1) { --i: 0 }
  .cell:nth-child(n + 1) { --j: 0 }
  .grid:has(.cell:nth-child(8n + 1):hover) { --ki: 0 }
  .grid:has(.cell:nth-child(n + 1):hover) { --kj: 0 }
   
  .cell:nth-child(8n + 2) { --i: 1 }
  .cell:nth-child(n + 9) { --j: 1 }
  .grid:has(.cell:nth-child(8n + 2):hover) { --ki: 1 }
  .grid:has(.cell:nth-child(n + 9):hover) { --kj: 1 }
   
  .cell:nth-child(8n + 3) { --i: 2 }
  .cell:nth-child(n + 17) { --j: 2 }
  .grid:has(.cell:nth-child(8n + 3):hover) { --ki: 2 }
  .grid:has(.cell:nth-child(n + 17):hover) { --kj: 2 }
   
  .cell:nth-child(8n + 4) { --i: 3 }
  .cell:nth-child(n + 25) { --j: 3 }
  .grid:has(.cell:nth-child(8n + 4):hover) { --ki: 3 }
  .grid:has(.cell:nth-child(n + 25):hover) { --kj: 3 }
   
  .cell:nth-child(8n + 5) { --i: 4 }
  .cell:nth-child(n + 33) { --j: 4 }
  .grid:has(.cell:nth-child(8n + 5):hover) { --ki: 4 }
  .grid:has(.cell:nth-child(n + 33):hover) { --kj: 4 }
   
  .cell:nth-child(8n + 6) { --i: 5 }
  .cell:nth-child(n + 41) { --j: 5 }
  .grid:has(.cell:nth-child(8n + 6):hover) { --ki: 5 }
  .grid:has(.cell:nth-child(n + 41):hover) { --kj: 5 }
   
  .cell:nth-child(8n + 7) { --i: 6 }
  .cell:nth-child(n + 49) { --j: 6 }
  .grid:has(.cell:nth-child(8n + 7):hover) { --ki: 6 }
  .grid:has(.cell:nth-child(n + 49):hover) { --kj: 6 }
   
  .cell:nth-child(8n + 8) { --i: 7 }
  .cell:nth-child(n + 57) { --j: 7 }
  .grid:has(.cell:nth-child(8n + 8):hover) { --ki: 7 }
  .grid:has(.cell:nth-child(n + 57):hover) { --kj: 7 }
</style>
<div class="grid" style="--n: 8">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class=.........完整代码请登录后点击上方下载按钮下载查看