成品效果图

HTML：

// 60％布局--  const row1 = [ [ '?' ，'' ，'s2 esc' ] ，[ '1' ，'！' ] ，[ '2' ，'@' ] ，[ '3' ，'＃' ] ，[ '4' ，'$' ] ，[ '5' ，'％' ] ，[ '6' ，'^' ] ，[ '7' ，'＆'  ], ['9', '('], ['0', ')'], ['-', '_', 'sub'],   ['=', '+', 'add'],   ['?', '', 's4 back'] ]  const row2 = [ [ '?' ，'' ，'s3选项卡' ] ，[ 'Q' ] ，   [ 'W' ] ，   [ 'E' ] ，[ 'R' ] ，[ 'T' ] ，[ ' Y' ] ，[ 'U' ] ，[ 'I' ] ，[ 'O' ] ，[ 'P' ] ，[ '\ [' ，'\ {' ，   'openbracket' ], [ '\]', '\}', 'closebracket'],  ['\\', '|', 's3 pipe'] ]  const row3 = [ [ '?' ，'' ，'s4 cap' ] ，   [ 'A' ] ，   [ 'S' ] ，   [ 'D' ] ，[ 'F' ，'' ，'虚线' ] ，[ 'G' ] ，[ 'H' ] ，[ 'J' ，'' ，'点' ] ，[ 'K' ] ，[ 'L' ] ，[  ';', ':', 'semi'], ['\,', '\"', 'comma'], ['?', '', 's4 enter'] ]  const row4 = [ [ '?' ，'' ，'s5 shift' ] ，[ 'Z' ] ，   [ 'X' ] ，   [ 'C' ] ，[ 'V' ] ，[ 'B' ] ，[ ' N' ] ，[ 'M' ] ，[ '，' ，'<' ，'openangular' ] ，[ '。' ，'>' ，  ['\/', '?', 'slash'], ['?', '', 's5 shift up'] ]  const row5 = [ [ '☕' ，'' ，'s3控制' ] ，[ '?' ，'' ，'s3赢' ] ，   [ '⭐️' ，'' ，'s3 alt' ] ，[ '' ，” ，“ s12空间” ] ，   [ '⭐️' ，” ，“ s3 alt” ] ，[ '?' ，” ，“s2 fn left' ] ，[ '?‍?' ，  ” ，“ s2 fn down” ] ，[ '☕' ，” ，“ s2控制权” ] ]   const rows = [ ... row1，... row2，... row3，... row4，... row5 ]  混合键（k ）  -让size = k [ 2 ] 吗？k [ 2 ] ：''    如果k [ 1 ] && k [ 1 ] ！= ''     。键（on-shift = k [ 1 ] ，class = size data-key = k [ 0 ]）= k [ 0 ]  其他    。键（class = size data-key = k [ 0 ]）= k [ 0 ]// ---------------------------------------------------。键盘  对于ķ 在列    + 键（k ）

CSS：

//不喜欢灯光吗？在这里把它关掉背光= 真 //新颜色灯= ＃D8DEE8黑暗= #ADBACE中= 混合（浅色，深色）最浅= 浅色（浅，70 ％）//响应大小克大小= （95 / 50 ）VW阴影大小= g大小/ 6// neo shadow mixin新（浅色，深色）  盒子阴影：-1 *阴影大小   -1 *阴影大小   3 *阴影大小的灯光，              阴影大小阴影大小      2 *阴影大小暗      新媒体（浅色，深色）  高光= 浅色（浅，40 ％）  ＆：悬停，＆。pressed    变换      透视图（300px ）比例（0.97 ）     箱阴影：插图    -1 *阴影尺寸   -1 *阴影尺寸   3 *阴影尺寸    -0.5 *阴影尺寸色调（光，30 ％），                  插入阴影大小阴影大小      2 *阴影大小暗    如果背光      白颜色      文字阴影：   0 0 10px高光，                       0 0 15px hightlight,                     0 0 20px hightlight                   // customize shadow for any color      customize(color)  background  color  color       lighten(color, 80%)  neo-press   lighten(color, 10%)   darken(color, 30%)    // styles -----------------.keyboard  display               grid  grid-template-columns repeat(30, g-size )   grid-template-rows    repeat(5, g-size*2.5 )   grid-gap              (g-size/2)  background            mid  padding               (g-size/1.1)  border-radius         (g-size/1.5)  background            light   neo                   lightest mid   .key    border-radius   (g-size/2.5)    grid-column     auto / span 2    width           100%    height          100%    padding         (g-size/4)    font-size       (g-size)    display         grid    align-items     center    color           shade(dark, 20%)    justify-content center    cursor          pointer    background      light    neo             lightest mid    transition      all 100ms cubic-bezier(.09,.32,.34,2)    user-select     none    neo-press       lightest mid        &.dotted      position      relative      &::before        content     '_'        font-weight bold        color       tint(dark, 10%)        position    absolute        top         70%        left        50%        transform   translate(-50%, -50%)          &.esc      customize(#ed4c67)          &.back      customize(#d63031)          &.shift      customize(#1e90ff)          &.control      customize(#be2edd)       &.win      customize(#f7b731)          &.alt      customize(#5352ed)          &.fn      customize(#26de81)          &.cap      customize(#ee5a24)      position relative      &::before        content ''        position absolute        width 0.5vw        height 0.5vw         background tint(#ee5a24, 50%)         top 1vw        right 1vw        border-radius 50%      &.on::before        background tint(#ee5a24, 80%)         box-shadow 0 0 0.5vw 0.2vw rgba(white, 0.8)         &.tab      customize(#12cbc4)          &.enter      customize(#fdcb6e)    for i in 2 3 4 5 6 12      &.s{i}        font-size   (g-size/1.1)        grid-column auto / span i            &[on-shift]      font-size     (g-size/1.3)      justify-items center             &::before        content     attr(on-shift)        align-items end                            @import url('https://fonts.lug.ustc.edu.cn/css2?family=Sen:wght@700&display=swap');*  box-sizing border-box  padding 0  margin 0  body  font-family: 'Sen', sans-serif;  min-height  100vh  overflow    hidden  display     grid  place-items center  背景放射状渐变（左上方的圆圈，亮30 ％，中）    //由MANAN TANK设计和编程 // https://twitter.com/mnn_tnk

JS：

keyHash = {  8 ：“。back” ，  9 ：“ .tab” ，  13 ：“ .enter” ，  16 ：“。shift” ，  17 ：“。control” ，  18 ：“。alt” ，  20 ：“。cap” ，  27 ：“。esc” ，  32 ：“。space” ，  37 ：“。left” ，  38 ：“。up” ，  39 ：“。right” ，  40 ：“。down” ，  186 ：“。semi” ，  187 ：'.add' ，  189 ：'.sub' ，  222 ：“。逗号” ，  219 ：“。openbracket” ，  221 ：“。closebracket” ，  220 ：“。pipe” ，  188 ：“ .openangular” ，  190 ：“。closeangular” ，  191 ：“。slash” ，  91 ：“。win”} ;const cap =文档。querySelector （'.cap' ）;函数checkCaps （）{    如果（事件。getModifierState （“大写锁定” ））{      帽。classList 。加（'on' ）  } 其他{      帽。classList 。删除（'on' ）  }}const handleKeyDown = (e) => {  checkCaps()  let target = keyHash[e.keyCode];  if (!target) target = `.key[data-key="${String.fromCharCode(e.keyCode)}"]`;  const key = document.querySelector(target);  key && key.classList.toggle("pressed");};function unPress(e) {  如果（即propertyName的=== “改造” ）此。classList 。移除（“按下” ）；  }窗口。addEventListener （“ keydown” ，handleKeyDown ）;const键=文档。querySelectorAll （“ .key” ）;键。的forEach （（ķ ）= > ... K 的addEventListener （“transitionend” ，unPress ））;