你不知道的 CSS 进度条
2021-01-18
阅读 7 分钟
6.8k作者：陈大鱼头github： KRISACHAN进度条是一个非常常见的功能，实现起来也不难，一般我们都会用 div 来实现。作为一个这么常见的需求， whatwg 肯定是不会没有原生组件提供（虽然有我们也不一定会用），那么就让我们来康康有哪些有意思的进度条实现方式。常规版 — div 一波流这是比较常规的实现方式，先看效果：源码如...
『极限版』不掺水，用纯 CSS 来实现超飒的表单验证功能
2020-09-06
阅读 5 分钟
2.6k作者：陈大鱼头github： KRISACHAN去年的时候写过一篇文章 纯CSS实现表单验证 ，在发表之后不久就有网友跟鱼头说，打算拿我这篇文章作团队内部分享。当时听到这个消息之后，在屏幕前的鱼头笑咧了嘴，但这位童鞋的下一段内容，就让我马上笑不起出来了。不过因为初始化状态是这样的：所以希望我能够改一下，改成这样：只有...
『真香警告』这33个超级好用的CSS选择器，你可能见都没见过。
2020-07-21
阅读 13 分钟
5kCSS 选择器也是如此，然而如今也已经发布了第四版 —— CSS Selectors Level 4 ，这一版最早的草案发布于2011年09月29日，最后更新是2018年11月21日。
二营长，快掏个CSS出来给我画个井字棋游戏
2020-07-14
阅读 12 分钟
5.8k作者：陈大鱼头 github： KRISACHAN 前言 不知道大家小时候有没有玩过一款游戏叫『井字棋』的。 它长这样： （我赢了，快夸我 ~o(´^｀)o） 上面的就是本次文章的最终结果，一个用纯CSS实现的AI井字棋游戏，Mmmm，虽然看起来有点蠢。。。 地址在此： [链接] 游戏的规则比较简单，就是在一个九宫格（据说十六宫格，二十五...
【Hello CSS】第九章-如何画一个体验更好的动画？
2019-07-22
阅读 7 分钟
1.6k在CSS中，animation 、 transition 跟 transform 使我们常用于制作动画的属性，我们先来大致地来了解下这三个属性。
【Hello CSS】第七章-CSS的继承与可变性
2019-07-22
阅读 6 分钟
1.4k继承（英语：inheritance） 是面向对象软件技术当中的一个概念。在 CSS 中与 层叠（英语：Cascade） 一起描述了如何设置样式规则，并为所有元素的所有属性赋值。这两个属性同属规范 “ CSS Cascading and Inheritance Level ”。CSS中的 继承 实际上是父级元素对子元素的影响。
【Hello CSS】第五章-CSS的选择器与函数
2019-07-22
阅读 5 分钟
1.9k在上一篇的HTML的标签与语意中简单的介绍了HTML标签跟其一些属性，向各位坚持看到这里的亲表示真诚的感谢。本篇主要会分享一些跟CSS选择器（CSS Selectors）相关的内容，有兴趣的请继续往下看。
【Hello CSS】第四章-HTML的标签与语意
2019-07-22
阅读 9 分钟
2.8k作者：陈大鱼头 github： KRISACHAN 上一篇分享了CSS的逻辑属性与盒子模型中分享了一些有关设备屏幕的知识以及浏览器视口的坐标构成。本篇则会分享HTML相关的一些知识。 我们在序章的开头就简单的讲解了HTML的诞生历史，本篇不作详细讲解，有兴趣的可以去看wikipedia。 HTML大事记 首先我们简单地来看一下HTML的发展历程...
【Hello CSS】第三章-浏览器的视图与坐标
2019-05-07
阅读 8 分钟
2.7k作者：陈大鱼头 github： KRISACHAN 在上一篇【Hello CSS】的第二章第二章-CSS的逻辑属性与盒子模型中提了个问题： 为什么Flex box跟Grid box的是以start、end为排列规则，而不是常规的top 、right 、bottom 跟left？ 现在各位看官有答案了吗？ 因为上一篇中有提到过CSS 逻辑属性的变革，从物理概念跳跃到了逻辑概念，也...
【Hello CSS】第二章-CSS的逻辑属性与盒子模型
2019-05-07
阅读 8 分钟
1.4k作者：陈大鱼头 github： KRISACHAN 在上一篇【Hello CSS】的第一章CSS的语法与工作流中介绍了CSS的语法规则以及基本的渲染流程。本篇则会分享CSS的逻辑属性以及盒子模型。 首先开篇之前先提个问题： 为什么Flex box跟Grid box的是以start、end为排列规则，而不是常规的top 、right 、bottom 跟left？ 先不要急着往下翻...