我为 InfoQ 写作社区定制一款机械键盘庆生

📢 嘿！大家好，我是法医，一只治疗系前端码猿🐒，与代码对话，倾听它们心底的呼声，期待着大家的点赞👍与关注➕

我是 2020 年 07 月 17 日加入 InfoQ 社区的，不知不觉已经两个年头了😎，今天正好赶上 InfoQ 极客传媒 15 周年庆，作为社区里一员的我，总得做点什么以表达对社区的祝福，这不，为社区量身定制一款机械键盘🙆‍♀️，废话不多说，有请今天的主角儿 👀

怎么样？是不是很炫？其实这个效果我是在袁老师的公开课上看到的，第一眼看到就情不自禁地迷上了😍，特别喜欢，那必须得做一个出来，我在键盘基础上加上了呼吸灯的效果，感觉更炫了，值得每一个人拥有😁，快来跟我实现一个属于自己的酷炫键盘👫

了解一下栅格布局

自从 94 年哈肯.维姆莱提和伯特波斯决定一起合作设计CSS，到现在为止已经 27 年了，比我年龄还大，哈哈！布局一直是最重要的功能，过去使用float和clear，但浮动主要是用来做文字环绕图片的，用来布局显然不是恰当的做法，后来弹性布局和栅格布局填补了一些空白。今天主要使用栅格布局来实现键盘布局。

1. 创建栅格容器

栅格布局第一步就是创建一个栅格容器，这点跟弹性盒布局中定义弹性容器很像，它们都会将一个父元素定义为栅格或者弹性容器，容器生成网格布局后，其所有子元素为网格元素，而弹性容器的子元素是弹性元素，从这点看，栅格布局从弹性盒模型上沿袭了很多概念。首选为需要设置栅格容器的元素添加display：grid，

2. 设置容器的行和列

grid-template-columns(列) 和 grid-template-rows(行)，如图：

repeat函数是一种简写的形式，当行或列达到一定数量的时候，用 repeat 函数可以简化重复的值，还有其它几种写法，如下：

3. 单元格之间的间隙

我们可以通过gap来设置单元格之间的宽度，它是一个复合属性，row-gap可以设置行间隙，column-gap可以设置列间隙。

4. 单元格内部对齐方式

单元格在默认的情况下，水平和垂直方向是拉伸的，以便撑满整个单元格，看个动图更形象😁

我们可以通过justify-items:center来设置水平方向的排列方式，用align-item:center来设置垂直方向的排列方式，可取值都是一样的：start 左 | end 右 | center 中 | stretch 拉伸(默认)

对了，它依然是个复合属性，我们可以通过place-items:center center属性分别设置垂直和水平方向的排列方式

5. 单元格定位

默认情况下，每个单元格都是独占一格的，但是我们可以通过设置grid-area来改变这一方式，让一个数字占四个格子

使用方式：grid-area: 起始行线编号/起始列线编号/结束行线编号/结束列线编号

📢 例：设置类名为 span2 的子元素 grid-area: 1/2/-2/4;

ok，以上就是机械键盘所需要的知识点，但栅格布局还是有很多的知识，我就不一一介绍了，开始我们的键盘实现🙆‍♀️

HTML 结构搭建

结构布局这块很简单，整体是一个 keyboard，每一个键是 key，里面包含了文字和图标，用 span 元素表示即可，就有了如下布局

用 CSS 弄花哨点

基于以上信息，首先给键盘整体设置样式

随即我们得到如下样式

紧接着我们需要做的就是设置每个按键的样式

然后键盘就变成这样了，是不是有点感觉了😎，起码像个按键了，别急，还没完！😂

我们发现有的按键是比较长的，这时只需要让个别按键多占格子就行，这里可以写一个特殊按钮大小的类名，然后给需要变化的按键加上即可😜

这时，我们得到如下样子，嗯哼！感觉差不多了，但还差点颜色，来吧！加颜色😚

按钮的处理依然是用特殊类名来处理，给需要的按键添加就行

快来看看得到什么样紫！哈哈，有那个味了，但还需要调整下

接下来，按照以下数据给键盘背景加上颜色，并且让按键发光

给类名 key 继续添加如下样式

这时，得到如下效果，快来瞅瞅😁😁😁

是不是很酷，效果出来了，但还差最后一步，为键盘添加呼吸灯，这里可以使用 CSS3 的animation来实现

📌 ok！大功告成，最后一步也完成了，你也拥有了属于自己虚拟流光键盘了，哈哈😁

最后祝 InfoQ 社区 15 周年生日快乐，未来之路，我愿与君共勉！🙆‍♀️

😊 好了， 以上就是我的分享，我是法医，期待着大家的点赞👍与关注➕