啥也不说先上图，看过了才知道好不好

这是我之前练习 CSS 的时候写的，反正我自己觉得效果很好，所以分享给大家。它的实现原理是：通过给每个键盘按键（div）添加 css 阴影实现的，因为 css 阴影可以模拟一个近似 3D 的视觉效果。

布局思路的话，我将键盘分成了【左】 【中】 【右】三个区域，而中间区域又分为了【上】 【下】两个部分，右边则分成了【指示灯】和【小键盘】两部分。

部分 HTML 代码截图如下

到目前为止，这个键盘只是单纯的界面样式：好看，但是没有任何交互。写完第一版之后，我为了更有趣味性，所以对其进行了升级，为每个按键添加了 JS 键盘事件。当我们敲击键盘时，那么网页上的键盘也会同步被按下，这样就可以给我们一个实时的反馈。

并且，我给每个键盘事件添加了一个有趣的 CSS 动画，就是当我们敲击键盘时，网页键盘对应的按键同步按下，当按键弹起时，会生成一个小气泡，气泡逐渐上升，然后直到消失。

升级后的键盘效果截图如下

具体的 JS 代码这里就不做讲解了，自己看下源码吧，都写有注释

最后附上源码的下载地址，喜欢的同学请自行下载：https://www.aliyundrive.com/s/k1L3aU9msiw