写了个 Mac 键盘当练习了

围观地址： https://github.com/kaikaiiiiiii/mac-keyboard 用了一些简单的 CSS，最后看起来效果还不错。

缘起是想给自己写个在 mac 下通过 alt/shift+alt 加内容键可以直接输入的符号列表，后来想想要不就做个键盘得了。最后效果就如下图了。

1. 功能键区的图标用的是 http://fontawesome.io ，不过依然有些图标找不到，暂空。F8 的图标是两个 fa 图标拼的。F1/F2 的图标比较写意，也不是完全一致。

2. 通过 :active 伪类添加了按键点下时的效果，包括：

(1) 底色变全黑 #000; （默认颜色是#333;）

(2) 位置右移 2 像素，下移 2 像素。

3. 通过 Transition 添加了“回弹”的效果。

4. 通过两个像素的 Border-bottom 效果，强调了按住 alt/shift+alt 后可以直接输出的字符。

5. Transition 在表现“回弹到原位时”，必须明确地添加 left:0px; top:0px; 以使得动画的计算有终点，否则 transition 是不起效果的。这个坑了半个多小时，遍查不到，突然自行顿悟。

6. 通过 -*-user-select: none; 让按钮在双击时，上面的字符不至于被选中。

7. css 的类还是分得很细的，键长、宽、upper、lower、keyname、altkey、shiftaltkey 等都是单独的类。当然 .space 的 width 就只能单写了这个没办法。

8. jQuery 还在学习中所以这个项目到这里就结束了。