层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。 所以一个页面中往往不仅仅只有一个层叠上下文(因为有很多种方式可以生成层叠上下文)，在一个层叠上…

其实CSS自定义属性还有很多小名，比如CSS变量、原生变量、CSS自定义属性级联变量，这些指的都是同个东西。 那既然SCSS就能做到的东西，我们还有这个所谓的CSS自定义变量干什么呢？人家自然有它的独到之处。 在这几个方面，预处理器完全被CSS自定义变量KO了。 语法很简单，分…

正文从下面开始。 今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。 嗯，我们需要使用 filter + mix-blend-mode 的组合来完成。 如上图，整个蜡烛的骨架， 除去火焰的部分很简单，掠过不讲。主要来看看火焰这一块如何生成，并且如何赋予动画效果。 模糊滤镜…

通过元素类型 tagName、*、.class 或 #id 匹配一个或多个元素。 通过 属性 / 属性值 匹配一个或多个元素。 伪类：匹配元素的相关状态和属性，如 :hover :first-child :nth-child() ，单冒号。 伪元素：匹配元素的相关位置, 如 :…

当我想要在网上找一个简洁的 Javascript 动效库时，总是发现很多“推荐”的库都是缺乏持续维护的。 经过一番研究，我收集了 11 个最好的库，你可以用在自己的项目中。另外我还添加了一些有用但是缺少持续维护的库。 提示：可以用 Bit 来共享你的组件，用它们构建多个项目并与…

直接进入正题，鼠标跟随，顾名思义，就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样： 通常而言，CSS 负责表现，JavaScript 负责行为。而鼠标跟随这种效果属于行为，要实现通常都需要借助 JS。 当然，本文的重点，就是介绍如何在不借助 JS 的情况下使用 CS…

1、static：默认值。没有定位，元素在正常显示出现（它将忽略top、bottom、left、right、z-index声明） 2、relative：生成相对定位的元素，相对于其正常位置进行移动。元素的位置通过 "left", "top", "right" 以及 "botto…

很多人想让我给他们推荐有关CSS部分的教程，或者问我如何学习CSS。 我也看到很多人对CSS的部分内容感到困惑，一部分原因是由于对语言的过时认识。 鉴于CSS在过去几年中发生了相当大的变化，这是一个更新知识的好时机。 即使CSS只是你所做工作的一小部分（因为你使用其他技术栈），…

在进行前端开发的时候，我们经常会有一个需求就是对于过长的文本进行省略显示，而文本省略主要分为单行文本省略以及多行文本省略。本篇博客主要是介绍单行文本省略实现方式以及多行文本省略的三种实现方式并分析其优劣点。 优点：十分的简便，只需要添加短短几行CSS样式就能够实现多行文本的省略…