div+css网格grid模拟5种不同长度的钢琴效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css网格grid模拟5种不同长度的钢琴效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
.kb {
  block-size: var(--_bs, 8em);
  display: grid;
  grid-column-gap: 1px;
  grid-template-columns: repeat(var(--_r, 156), 1fr);
  grid-template-rows: repeat(5, 1fr);
  inline-size: max-content;
}
.kb [aria-label] {
  --_focus-bxsh: inset 0 0 50px #fff, inset 20px 0 80px hsl(var(--_h,0), 70%, 35%), inset -20px 0 80px hsl(var(--_h,0), 100%, 50%);
  --_hover-bg: linear-gradient(to bottom, #FFF 0%, hsl(0, 0%, 90%) 100%);
  background-color: var(--_bgc, #FFF);
  border: 0;
  border-radius: 0 0 3px 3px;
  grid-column: var(--gcs) / span var(--_csp, 3);
  grid-row: 1 / span var(--_rsp, 5);
}
.kb [aria-label*="#"] { 
  --_bgc: #000;
  --_csp: 2;
  --_focus-bxsh: inset 0 0 50px hsl(var(--_h,0), 25%, 35%), inset 20px 0 80px hsl(var(--_h,0), 70%, 35%), inset -20px 0 80px hsl(var(--_h,0), 100%, 50%);
  --_hover-bg: linear-gradient(to top, #000 0%, hsl(0, 0%, 25%) 100%);
  --_rsp: 3;
  position: relative;
}
.kb [aria-label]:hover { background: var(--_hover-bg); }
.kb [aria-label]:focus-visible { box-shadow: var(--_focus-bxsh); outline: none; }
.synth {
  background: linear-gradient(215deg, hsl(0, 0%, 25%), hsl(0, 0%, 15%), hsl(0, 0%, 5%));
  border-radius: .33em .33em .75em .75em;
  color: #FFF;
  font-family: 'Russo One', sans-serif;
  inline-size: max-content;
  padding: .5em 1em 1em 1em;
}
.synth h2 { margin: 0 0 .5em 0; }

/* modifiers */
.kb--61 { --_r: 108;--_h: 180 }
.kb--49 { --_r: 87;--_h: 200 }
.kb--32 { --_bs: 6em; --_r: 57;--_h: 300 }
.kb--25 { --_bs: 6em; --_r: 45;--_h: 45 }

/* for this demo only */
body { display: grid; gap: 2ch; }
</style>

  

</head>

<body  >
  <div class="synth">
	<h2>GRID KEYS-88</h2>
	<div id="kb88" class="kb kb--88"><button aria-label="A0" data-freq="27.5" style="--gcs:1" type="button>"></button>
<button aria-label="A#0" data-freq="29.13523509488062" style="--gcs:3" type="button>"></button>
<button aria-label="B0" data-freq="30.86770632850775" style="--gcs:4" type="button>"></button>
<button aria-label="C1" data-freq="32.70319566257483" style="--gcs:7" type="button>"></button>
<button aria-label="C#1" data-freq="34.64782887210902" style="--gcs:9" type="button>"></button>
<button aria-label="D1" data-freq="36.70809598967594" style="--gcs:10" type="button>"></button>
<button aria-label="D#1" data-freq="38.89087296526011" style="--gcs:12" type="button>"></button>
<button aria-label="E1" data-freq="41.20344461410874" style="--gcs:13" type="button>"></button>
<button aria-label="F1" data-freq="43.653528929125486" style="--gcs:16" type="button>"></button>
<button aria-label="F#1" data-freq="46.24930283895431" style="--gcs:18" type="button>"></button>
<button aria-label="G1" data-freq="48.999429497718666" style="--gcs:19" type="button>"></button>
<button aria-label="G#1" data-freq="51.91308719749314" style="--gcs:21" type="button>"></button>
<button aria-label="A1" data-freq="55" style="--gcs:22" type="button>"></button>
<button aria-label="A#1" data-freq="58.27047018976124" style="--gcs:24" type="button>"></button>
<button aria-label="B1" data-freq="61.7354126570155" style="--gcs:25" type="button>"></button>
<button aria-label="C2" data-freq="65.40639132514966" style="--gcs:28" type="button>"></button>
<button aria-label="C#2" data-freq="69.29565774421803" style="--gcs:30" type="button>"></button>
<button aria-label="D2" data-freq="73.41619197935188" style="--gcs:31" type="button>"></button>
<button aria-label="D#2" data-freq="77.78174593052022" style="--gcs:33" type="button>"></button>
<button aria-label="E2" data-freq="82.40688922821748" style="--gcs:34" type="button>"></button>
<button aria-label="F2" data-freq="87.30705785825097" style="--gcs:37" type="button>"></button>
<button aria-label="F#2" data-freq="92.49860567790861" style="--gcs:39" type="button>"></button>
<button aria-label="G2" data-freq="97.99885899543733" style="--gcs:40" type="button>"></button>
<button aria-label="G#2" data-freq="103.82617439498628" style="--gcs:42" type="button>"></button>
<button aria-label="A2" data-freq="110" style="--gcs:43" type="button>"></button>
<button aria-label="A#2" data-freq="116.54094037952248" style="--gcs:45" type="button>"></button>
<button aria-label="B2" data-freq="123.47082531403103" style="--gcs:46" type="button>"></button>
<button aria-label="C3" data-freq="130.8127826502993" style="--gcs:49" type="button>"></button>
<button aria-label="C#3" data-freq="138.59131548843604" style="--gcs:51" type="button>"></button>
<button aria-label="D3" data-freq="146.8323839587038" style="--gcs:52" type="button>"></button>
<button aria-label="D#3" data-freq="155.56349186104043" style="--gcs:54" type="button>"></button>
<button aria-label="E3" data-freq="164.81377845643496" style="--gcs:55" type="button>"></button>
<.........完整代码请登录后点击上方下载按钮下载查看