最近，有同学询问，如何使用 CSS 实现如下效果：看起来是个很有意思的动效。仔细思考一下，要想实现这类效果，其实用到的核心属性只有一个 -- background-clip: text。有意思的 background-clip: textbackground-clip: text 之前也提到多很多次。其核心就在于以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的...

FizzBu​​zz 是一道很有意思的题目。我们来看看题目：如果遇见了 3 的倍数要说 Fizz，5 的倍数就说 Buzz，如果既是 3 的倍数又是 5 的倍数就说 FizzBuzz。如果是在一些编程语言中，这是一道比较初级的题目，当然，稍微转换一下，我们就可以把它转换成一道有关 CSS 选择器的题目。假设我们有如下结构： {代码...} 通过 CSS...

步入 2022，CSS 的新特性层出不穷，而最近在 CSS 圈最受瞩目的新特性，非 CSS @layer 莫属。本文，将用最简洁的语言，快速让读者们搞懂，到底什么是 CSS @layer 新规范。过往 CSS 优先级中存在的问题如果我们的页面上存在非常多的样式，譬如有我们开发页面的时候的自定义样式，也有引入的组件库样式。这时候样式将会非常...

文本在黑色底色上表现为白色，在白色底色上表现为黑色。看似很复杂的一个效果，但是其实在 CSS 中非常好实现，今天就介绍这样一个小技巧，在 CSS 中，利用混合模式 mix-blend-mode: difference，让文字智能适配背景颜色。

很有意思的问题，我们在百度谷歌，搜索 qrcode，能搜到非常多在线制作二维码的工具，它们其中一些也会带有制作渐变二维码的功能。但是它们大部分都是 Canvas 或者其它编程语言实现的。

在 CSS 规范 Scroll-linked Animations 中，推出了一个划时代的 CSS 功能。也就是 -- The @scroll-timeline at-rule，直译过来就是滚动时间线。本文，就将带大家一探究竟，从入门到学会使用 CSS @scroll-timeline。何为 @scroll-timeline 滚动时间线？什么是 @scroll-timeline 滚动时间线呢？@scroll-timeline 能够设定...

最近有个小伙伴问我，在某个网站看到一个使用 SVG 实现的炫彩三角边框动画，问能否使用 CSS 实现：很有意思的一个动画效果，立马让我想起了我在 CSS 奇思妙想边框动画 一文中介绍的边框动画，非常的类似：其核心就是利用了角向渐变（conic-gradient），然后将图案的中心区域通过覆盖遮罩一个小号的图形实现。然而，这个...

上述效果，最核心的就是文字的动画，文字从较细贴着较紧，到较粗隔着较远不断变化。有人会认为这里是 transform: scale()，实则不然。

最近几年 CSS 界的大事之一是每年年底的 《State Of CSS》，也就是 CSS 现状调查，去年年底发布了《State Of CSS 2021》。其中关于特性这一章，会列出一些比较新的 CSS 特性在当年的使用情况概览：

在我们的页面中，经常会出现这样的问题，一块区域内的文本或者边框，在展示的时候，变得特别的模糊，如下(数据经过脱敏处理)：正常而言，应该是这样的：emmm，可能大图不是很明显，我们取一细节对比，就非常直观了：何时触发这种现象？那么？什么时候会触发这种问题呢？在 Google 上，其实我们能搜到非常多类似的案例，...

最近 S11 LPL 春季赛开赛，在看比赛的过程中，我发现新赛季的 Ban/Pick 选人阶段，出现了一种新的，有意思的遮罩效果，如下图所示：

最近，我们内部的一个低代码平台完工上线，它的首页大概是这样子（数据脱敏）：当然，这个不是项目不是本文的重点。主要看看这个页面的背景，一个磨砂（毛玻璃）质感效果的渐变背景图，看上去是比较高级的。剥离掉页面的内容元素，只剩下背景的话，大概是这样：一开始是打算切图实现的，但是仔细一想，这个效果使用 CSS ...

有群友问我，使用 CSS 如何实现如下 Loading 效果：这是一个非常有意思的问题。我们知道，使用 CSS，我们可以非常轻松的实现这样一个动画效果： {代码...} {代码...} 动画如下：与要求的线条 loading 动画相比，上述动画缺少了比较核心的一点在于：线条在旋转运动的过程中，长短是会发生变化的所以，这里的的难点也就转...

本文将比较全面细致的梳理一下 CSS 动画的方方面面，针对每个属性用法的讲解及进阶用法的示意，希望能成为一个比较好的从入门到进阶的教程。CSS 动画介绍及语法首先，我们来简单介绍一下 CSS 动画。最新版本的 CSS 动画由规范 -- CSS Animations Level 1 定义。CSS 动画用于实现元素从一个 CSS 样式配置转换到另一个 CSS...

背景某日，群友们在群里抛出这样一个问题，如何使用 CSS 实现如下的布局：在 CSS 世界中，如果只是下述这种效果，还是非常容易实现的：一旦涉及到圆角或者波浪效果，难度就会提升很多。实现这种连续平滑的曲线其实是比较麻烦的，当然，也不是完全没有办法。本文，就会带大家看看，使用 CSS 实现上述内凹平滑圆角效果的一...

最近利用 CSS 实现了一些看似超出 CSS 能力的效果：巧用渐变实现高级感拉满的背景光动画Amazing！！CSS 也能实现极光？本文继续此系列，本文主要想探讨一下，使用 CSS 能否比较好的实现一些烟雾效果。像是这样：仔细观察烟雾效果，有两个比较重要的特点：模糊效果颗粒感首先看模糊效果，想到模糊，大部分同学首先都会想...

emmm，这有点难为人了。不过，最近我也尝试着去试了下，虽然不可能模拟出那么真实的效果，但是使用 CSS 还是可以作出类似的一些特效的，今天我们就一起来尝试下。

背景今天逛 CodePen，看到了这样一个非常有意思的效果：CodePen Demo -- Material Design Menu By Bennett Feely这个效果还是有一些值得探讨学习的点，下面我们一起来看看。如何实现这样一个类似的效果？首先，想一想，如果让你去实现上面的效果，你会怎么做呢？这里我简单罗列一些可能的办法：阴影 box-shadow渐变 radi...

背景在群里会有同学问相关的问题，怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢？本文基于一些高频出现在设计稿中的，使用 CSS 实现稍微有点难度和技巧性的按钮，讲解使用 CSS 如何尽可能的实现它们。先让我们来看看这些经常会出现的按钮形状：矩形与圆角按钮正常而言，我们遇到的按钮就这两种 -...

背景在上一篇 巧用滤镜实现高级感拉满的文字快闪切换效果 中，我们提到了一种非常有意思的之前苹果展示文字的动画效果。本文，会带来另外一个有意思的效果，巧用渐变实现高级感拉满的背景光动画。此效果运用在苹果官网 iPhone 13 Pro 的介绍页中：实现这个效果想利用 CSS 完全复制是比较困难的。CSS 模拟出来的光效阴影...

当然，今天并非是想用 CSS 实现上述的的效果。在尝试的过程中，我发现了另外一类能够使用 CSS 非常轻松实现文字快闪动画，运用了blur() 滤镜和 contrast() 滤镜产生的融合效果，类似于这样：

背景周末在家习惯性登陆 Apex，准备玩几盘。在登陆加速器的过程中，发现加速器到期了。我一直用的腾讯网游加速器，然而点击充值按钮，提示最近客户端升级改造，暂不支持充值（这个操作把我震惊了~）。只能转头下载网易 UU 加速器。打开 UU 加速器首页，映入眼帘的是这样一幅画面：瞬间，被它这个背景图吸引。出于对 CSS ...

本文将介绍如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式，通过本文，你可能可以学会：通过 HTML 标签 <meter> 创建进度条通过 HTML 标签 <progress> 创建进度条HTML 实现进度条的局限性使用 CSS 百分比、渐变创建普通进度条及其动画使用 CSS 创建圆环形进度条使用 CSS 创建球形进度条使...

本文将通过一个实际的业务需求，讲解如何实现极端场景下文字加粗加边框效果文字多重边框的效果需求背景 - 文字的二次加粗今天遇到这样一个有意思的问题：在文字展示的时候，利用了 font-weight: bold 给文字进行加粗，但是觉得还是不够粗，有什么办法能够让文字更粗一点呢？emm，不考虑兼容性的话，答案是可以利用文字的...

本文将向大家介绍 Chrome 87 开始支持的 CSS Overview Panel，并且介绍如何更好地利用这个面板。通过 CSS Overview Panel，可能可以帮助我们：

本文将介绍一种利用 CSS 滤镜 filter 的 drop-shadow()，实现对 HTML 元素及 SVG 元素的部分添加阴影效果，以实现一种酷炫的光影效果，用于各种不同的场景之中。通过本文，你可以学到：

到国庆了，大家都急着给祖国母亲庆生。每年每到此时，微信朋友圈就会流行起给头像装饰上国旗，而今年又流行这款：emm，很不错。那么，将一张国旗图片与我们的头像，快速得到想要的头像，使用 CSS 如何简单实现呢？有人认为是改变其中一张图的透明度，实际上不是的。仔细观察合成后的头像，最左边的基本上只能看到红旗看...

本文将介绍一个小技巧，通过混合模式 mix-blend-mode 巧妙的实现文字的镂空波浪效果。起因一日，一群友私聊问我。如何使用 CSS 实现下述效果，一个文字的波浪效果：我当时想都没想，就回答道，这个很简单啊。熟练的打开 CodePen，一顿操作，卧槽，好像事情没有那么简单。想要用纯 CSS 实现起来非常的棘手。纯 CSS 实现波...

通过 background-size 与 background-position 以及 background-clip 实现文字逐个渐现的效果

本文的标题是如何写出让别人看不懂的选择器，但是本意不是希望大家去写如此复杂的选择，一些复杂（怪异）的选择器在一些特定场景下也许有着妙用，又或者写出这种选择器是基于当时的特殊背景。