纯CSS实现 | 食物系虚拟流光键盘

我是法医，一只治疗系前端码猿🐒，与代码对话，倾听它们心底的呼声，期待着大家的点赞👍与关注➕，当然也欢迎加入前端猎手技术交流群😛，文末扫码我拉你进群，一起交流技术以及代码之外的一切🙆‍♀️

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

啥是食物系虚拟流光键盘？键盘不是分什么轴嘛，啥时候键盘还有食物系？能吃吗？

废话不多说，有请今天的主角儿 👀

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

了解一下栅格布局

自从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！大功告成，最后一步也完成了，你也拥有了属于自己虚拟流光键盘了，哈哈🙆‍♀️，

😊 好了， 以上就是我的分享，，我是法医，期待着大家的点赞👍与关注➕，当然也欢迎加入前端猎手技术交流群😛，主页加我微信，我拉你进群，一起交流技术以及代码之外的一切🙆‍♀️