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

kb1.png


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


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

kb2.png


部分 HTML 代码截图如下

kb3.png


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


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


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

PLUS.png


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


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

本文最后更新于 2024-05-14 22:33:11HTML/CSS
作者:鄢云峰 YYF声明:转载请注明文章出处地址:https://www.yanyunfeng.com/article/41
评论
提交
Comments | 4 条评论