div+css网格grid模拟5种不同长度的钢琴效果代码
代码语言：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>
<button aria-label="F3" data-freq="174.61411571650194" style="--gcs:58" type="button>"></button>
<button aria-label="F#3" data-freq="184.99721135581723" style="--gcs:60" type="button>"></button>
<button aria-label="G3" data-freq="195.99771799087463" style="--gcs:61" type="button>"></button>
<button aria-label="G#3" data-freq="207.65234878997256" style="--gcs:63" type="button>"></button>
<button aria-label="A3" data-freq="220" style="--gcs:64" type="button>"></button>
<button aria-label="A#3" data-freq="233.08188075904496" style="--gcs:66" type="button>"></button>
<button aria-label="B3" data-freq="246.94165062806206" style="--gcs:67" type="button>"></button>
<button aria-label="C4" data-freq="261.6255653005986" style="--gcs:70" type="button>"></button>
<button aria-label="C#4" data-freq="277.1826309768721" style="--gcs:72" type="button>"></button>
<button aria-label="D4" data-freq="293.6647679174076" style="--gcs:73" type="button>"></button>
<button aria-label="D#4" data-freq="311.12698372208087" style="--gcs:75" type="button>"></button>
<button aria-label="E4" data-freq="329.6275569128699" style="--gcs:76" type="button>"></button>
<button aria-label="F4" data-freq="349.2282314330039" style="--gcs:79" type="button>"></button>
<button aria-label="F#4" data-freq="369.99442271163446" style="--gcs:81" type="button>"></button>
<button aria-label="G4" data-freq="391.99543598174927" style="--gcs:82" type="button>"></button>
<button aria-label="G#4" data-freq="415.3046975799451" style="--gcs:84" type="button>"></button>
<button aria-label="A4" data-freq="440" style="--gcs:85" type="button>"></button>
<button aria-label="A#4" data-freq="466.1637615180899" style="--gcs:87" type="button>"></button>
<button aria-label="B4" data-freq="493.8833012561241" style="--gcs:88" type="button>"></button>
<button aria-label="C5" data-freq="523.2511306011972" style="--gcs:91" type="button>"></button>
<button aria-label="C#5" data-freq="554.3652619537442" style="--gcs:93" type="button>"></button>
<button aria-label="D5" data-freq="587.3295358348151" style="--gcs:94" type="button>"></button>
<button aria-label="D#5" data-freq="622.2539674441618" style="--gcs:96" type="button>"></button>
<button aria-label="E5" data-freq="659.2551138257398" style="--gcs:97" type="button>"></button>
<button aria-label="F5" data-freq="698.4564628660078" style="--gcs:100" type="button>"></button>
<button aria-label="F#5" data-freq="739.9888454232689" style="--gcs:102" type="button>"></button>
<button aria-label="G5" data-freq="783.9908719634986" style="--gcs:103" type="button>"></button>
<button aria-label="G#5" data-freq="830.6093951598903" style="--gcs:105" type="button>"></button>
<button aria-label="A5" data-freq="880" style="--gcs:106" type="button>"></button>
<button aria-label="A#5" data-freq="932.3275230361799" style="--gcs:108" type="button>"></button>
<button aria-label="B5" data-freq="987.7666025122483" style="--gcs:109" type="button>"></button>
<button aria-label="C6" data-freq="1046.5022612023945" style="--gcs:112" type="button>"></button>
<button aria-label="C#6" data-freq="1108.7305239074883" style="--gcs:114" type="button>"></button>
<button aria-label="D6" data-freq="1174.6590716696303" style="--gcs:115" type="button>"></button>
<button aria-label="D#6" data-freq="1244.5079348883235" style="--gcs:117" type="button>"></button>
<button aria-label="E6" data-freq="1318.5102276514797" style="--gcs:118" type="button>"></button>
<button aria-label="F6" data-freq="1396.9129257320155" style="--gcs:121" type="button>"></button>
<button aria-label="F#6" data-freq="1479.9776908465378" style="--gcs:123" type="button>"></button>
<button aria-label="G6" data-freq="1567.981743926997" style="--gcs:124" type="button>"></button>
<button aria-label="G#6" data-freq="1661.2187903197805" style="--gcs:126" type="button>"></button>
<button aria-label="A6" data-freq="1760" style="--gcs:127" type="button>"></button>
<button aria-label="A#6" data-freq="1864.6550460723597" style="--gcs:129" type="button>"></button>
<button aria-label="B6" data-freq="1975.533205024496" style="--gcs:130" type="button>"></button>
<button aria-label="C7" data-freq="2093.004522404789" style="--gcs:133" type="button>"></button>
<button aria-label="C#7" data-freq="2217.461047814977" style="--gcs:135" type="button>"></button>
<button aria-label="D7" data-freq="2349.31814333926" style="--gcs:136" type="button>"></button>
<button aria-label="D#7" data-freq="2489.015869776647" style="--gcs:138" type="button>"></button>
<button aria-label="E7" data-freq="2637.0204553029594" style="--gcs:139" type="button>"></button>
<button aria-label="F7" data-freq="2793.825851464031" style="--gcs:142" type="button>"></button>
<button aria-label="F#7" data-freq="2959.9553816930757" style="--gcs:144" type="button>"></button>
<button aria-label="G7" data-freq="3135.9634878539946" style="--gcs:145" type="button>"></button>
<button aria-label="G#7" data-freq="3322.437580639561" style="--gcs:147" type="button>"></button>
<button aria-label="A7" data-freq="3520" style="--gcs:148" type="button>"></button>
<button aria-label="A#7" data-freq="3729.3100921447194" style="--gcs:150" type="button>"></button>
<button aria-label="B7" data-freq="3951.066410048992" style="--gcs:151" type="button>"></button>
<button aria-label="C8" data-freq="4186.009044809578" style="--gcs:154" type="button>"></button></div>
</div>
<div class="synth">
<h2>GRID KEYS-61</h2>
<div id="kb61" class="kb kb--61"><button aria-label="C2" data-freq="65.40639132514966" style="--gcs:1" type="button>"></button>
<button aria-label="C#2" data-freq="69.29565774421803" style="--gcs:3" type="button>"></button>
<button aria-label="D2" data-freq="73.41619197935188" style="--gcs:4" type="button>"></button>
<button aria-label="D#2" data-freq="77.78174593052022" style="--gcs:6" type="button>"></button>
<button aria-label="E2" data-freq="82.40688922821748" style="--gcs:7" type="button>"></button>
<button aria-label="F2" data-freq="87.30705785825097" style="--gcs:10" type="button>"></button>
<button aria-label="F#2" data-freq="92.49860567790861" style="--gcs:12" type="button>"></button>
<button aria-label="G2" data-freq="97.99885899543733" style="--gcs:13" type="button>"></button>
<button aria-label="G#2" data-freq="103.82617439498628" style="--gcs:15" type="button>"></button>
<button aria-label="A2" data-freq="110" style="--gcs:16" type="button>"></button>
<button aria-label="A#2" data-freq="116.54094037952248" style="--gcs:18" type="button>"></button>
<button aria-label="B2" data-freq="123.47082531403103" style="--gcs:19" type="button>"></button>
<button aria-label="C3" data-freq="130.8127826502993" style="--gcs:22" type="button>"></button>
<button aria-label="C#3" data-freq="138.59131548843604" style="--gcs:24" type="button>"></button>
<button aria-label="D3" data-freq="146.8323839587038" style="--gcs:25" type="button>"></button>
<button aria-label="D#3" data-freq="155.56349186104043" style="--gcs:27" type="button>"></button>
<button aria-label="E3" data-freq="164.81377845643496" style="--gcs:28" type="button>"></button>
<button aria-label="F3" data-freq="174.61411571650194" style="--gcs:31" type="button>"></button>
<button aria-label="F#3" data-freq="184.99721135581723" style="--gcs:33" type="button>"></button>
<button aria-label="G3" data-freq="195.99771799087463" style="--gcs:34" type="button>"></button>
<button aria-label="G#3" data-freq="207.65234878997256" style="--gcs:36" type="button>"></button>
<button aria-label="A3" data-freq="220" style="--gcs:37" type="button>"></button>
<button aria-label="A#3" data-freq="233.08188075904496" style="--gcs:39" type="button>"></button>
<button aria-label="B3" data-freq="246.94165062806206" style="--gcs:40" type="button>"></button>
<button aria-label="C4" data-freq="261.6255653005986" style="--gcs:43" type="button>"></button>
<button aria-label="C#4" data-freq="277.1826309768721" style="--gcs:45" type="button>"></button>
<button aria-label="D4" data-freq="293.6647679174076" style="--gcs:46" type="button>"></button>
<button aria-label="D#4" data-freq="311.12698372208087" style="--gcs:48" type="button>"></button>
<button aria-label="E4" data-freq="329.6275569128699" style="--gcs:49" type="button>"></button>
<button aria-label="F4" data-freq="349.2282314330039" style="--gcs:52" type="button>"></button>
<button aria-label="F#4" data-freq="369.99442271163446" style="--gcs:54" type="button>"></button>
<button aria-label="G4" data-freq="391.99543598174927" style="--gcs:55" type="button>"></button>
<button aria-label="G#4" data-freq="415.3046975799451" style="--gcs:57" type="button>"></button>
<button aria-label="A4" data-freq="440" style="--gcs:58" type="button>"></button.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0