标签: 纯css

写了个 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 还在学习中所以这个项目到这里就结束了。

pic