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

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

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

微信图片_20211215234401.gif

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

GIF 2022-4-11 0-32-48.gif

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

了解一下栅格布局

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

1. 创建栅格容器

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

2. 设置容器的

grid-template-columns(列) grid-template-rows(行),如图:

创建栅格.png

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

创建栅格1.png

3. 单元格之间的间隙

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

创建栅格2.png

4. 单元格内部对齐方式

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

GIF 2022-4-10 21-06-28.gif

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

创建栅格99.png

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

5. 单元格定位

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

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

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

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

HTML结构搭建

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

carbon (1).png

用CSS弄花哨点

创建栅格100.png

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

carbon (2).png

随即我们得到如下样式

image.png

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

carbon (3).png

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

image.png

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

carbon (4).png

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

image.png

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

carbon (5).png

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

image.png

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

创建栅格120.png

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

carbon (6).png

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

GIF 2022-4-11 0-02-18.gif

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

carbon (7).png

📌 ok!大功告成,最后一步也完成了,你也拥有了属于自己虚拟流光键盘了,哈哈🙆‍♀️,

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


本文来自一日成建站教程网https://www.yiricheng.cn/),为广大编程爱好者提供零基础快速搭建博客网站的方法,分享计算机网络、HTML、CSS、JavaScript、PHP、响应式设计以及Python自动化办公的博客文章,另有各类小工具、电子书、免费教程。 版权声明:本文知识版权归原作者所有,该文观点仅代表作者本人。本站仅提供信息存储空间服务,非用于商业用途,不拥有所有权,未对原文做任何修改,不承担相关法律责任,仅用于知识分享。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。 原文链接:https://segmentfault.com/a/1190000041824550

相关阅读  python又搞事情 想一统天下?