共计 1695 个字符，预计需要花费 5 分钟才能阅读完成。
📢 嘿！大家好，我是法医，一只医治系前端码猿🐒，与代码对话，聆听它们心底的呼声，期待着大家的点赞👍与关注➕
啥是食物系虚构流光键盘？键盘不是分什么轴嘛，啥时候键盘还有食物系？能吃吗？
废话不多说，有请明天的配角儿 👀
怎么样？是不是很炫？其实这个成果我是在袁老师的公开课上看到的，第一眼看到就不由自主地迷上了😍，特地喜爱，那必须得做一个进去，我在键盘根底上加上了呼吸灯的成果，感觉更炫了，值得每一个人领有😁，快来跟我实现一个属于本人的酷炫键盘👫
理解一下栅格布局
自从 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！功败垂成，最初一步也实现了，你也领有了属于本人虚构流光键盘了，哈哈🙆♀️，
😊 好了，以上就是我的分享，，我是法医，期待着大家的点赞👍与关注➕，当然也欢送退出前端猎手技术交换群😛，主页加我微信，我拉你进群，一起交换技术以及代码之外的所有🙆♀️
