最近，群里聊到了一个很有意思的布局效果。大致效果如下所示，希望使用 CSS 实现如下所示的布局效果：正常而言，我们的 HTML 结构大致是如下所示： {代码...} 对于 Hover 导航 Tab 时候的内容切换，暂且不谈。本文，我们核心想探讨的是两个点：一是对于如下所示的不规则布局，应该如何实现：并且，这里我们可能还需要给...

accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候，更深入的了解了一下这个属性。

最近，有群里在群里发了这么一个非常有意思的卡片 Hover 动效，来源于此网站 -- key-drop，效果如下：非常有意思酷炫的效果。而本文，我们不会完全还原此效果，而是基于此效果，尝试去制作这么一个类似的卡片交互效果：该效果的几个核心点：卡片的 3D 旋转跟随鼠标移动效果如何让卡片在 Hover 状态，有不同的光泽变化如...

在 23 年的 CSS 新特性中，有一个非常重要的功能更新 -- 相对颜色。简单而言，相对颜色的功能，让我们在 CSS 中，对颜色有了更为强大的掌控能力。其核心功能就是，让我们能够基于一个现有颜色 A，通过一定的转换规则，快速生成我们想要的颜色 B。其功能能够涵盖：精简调暗饱和度降低饱和度色度增强调整不透明度反转补充...

今天，我们来看这么一个非常常见的切图场景，我们需要一个带圆角的虚线边框，像是这样：这个我们使用 CSS 还是可以轻松解决的，代码也很简单，核心代码： {代码...} 但是，原生的 dashed 有一个问题，就是我们无法控制虚线的单段长度与间隙。假设，我们要这么一个效果呢虚线效果呢：此时，由于无法控制 border: 2px dash...

在页面布局中，我们经常会遇到/使用这么一类常见的布局，也就是列表内容水平居中于容器中，像是这样： {代码...} {代码...} 效果如下：这里，外层的容器是定宽的，内层的 flex-item 也是定宽的。当 flex-item 个数较小时，是没有问题的。但是，如果当元素内容过多，并且设置了 flex-wrap: nowrap 的话，内容就会溢出容器...

最近，相信大家一定被这么个动效给刷屏了：以至于，基于这个效果的二次创作层出不穷，眼花缭乱。基于跨窗口通信的弹弹球：基于跨窗口通信的 Flippy Bird：我也尝试制作了一个跨 Tab 窗口的 CSS 动画联动，效果如下：代码不多，核心代码 200 行，感兴趣的可以戳这里：Github - broadcastAnimation当然，本文的核心不是去...

今天在群里，有个小伙伴问了这么一道很有趣的问题：CSS 能否实现，容器再某个高度下是某种表现，一旦超出某个高度，则额外展示另外一些内容为了简化实际效果，我们看这么一张示意效果图：可以看到，当容器高度没有超过某一个值时，没有箭头图标。反之，箭头图标出现。这个效果在很多场景都会出现，可以算是一个高频场景...

每天，我们都在和各种文档打交道，PRD、技术方案、个人笔记等等等。其实文档排版有很多学问，就像我，对排版有强迫症，见不得英文与中文之间不加空格。所以，最近在做这么一个谷歌扩展插件 chrome-extension-text-formatting，通过谷歌扩展，快速将选中文本，格式化为符合 中文文案排版指北 的文本。emmm，什么是排版指...

在 CSS 还原拉斯维加斯球数字动画 - 掘金 一文中，我们利用纯 CSS，实现了一个非常 Amazing 的动画效果：其中一个核心点就是，我们利用了如下的代码，在一个 DIV 平面内，实现了单个平面下的随机文字随机颜色效果。效果如下：其中的 HTML 代码大致如下： {代码...} 这里为了实现上述效果，其实是用了 32 列，每列是一个 ...

最近大家刷抖音，是否有刷到拉斯维加斯的新地标 「Sphere」：场馆内部的视觉效果非常惊人，其中一个效果让我虎躯一震：我的第一想法就是，这个看起来用 CSS 也可以实现嘛？还有 CSS 不能实现的？本文，就将尝试使用 CSS，大致还原这个效果。拆解动画效果其实，上述的动画效果，本质就是一个 3D 立方体。同时，3D 立方体...

在知乎看到一题比较有意思的题目。题目大致是如何实现下述图片的效果，如果使用 div 前置遮挡的话，会影响 div 后面的按钮，使其无法被点击。本文将简单介绍几种这个效果的实现方案。渐变配合 pointer-event第一种方式，比较容易想到。使用渐变配合 pointer-event 实现。简单模拟一下场景，假设我们有如下一个 ul 列表，...

最近，在 Steam 玩一款老游戏（生化危机 4 重置版），其中，每当游戏转场的过程中，都有这么一个有趣的 Loading 动画：整个效果有点类似于日食效果，中间一圈黑色，向外散发着太阳般的光芒。本文，我们将尝试使用 CSS，还原这个效果。整个效果做出来，类似于如下两个动画效果这样：实现主体效果其实，整个效果，去掉中间...

本文，我们将一起利用纯 CSS，实现如下这么个酷炫的效果：在一年前，我介绍了 CSS 中非常新奇有趣的一个新特性 -- @scroll-timeline：革命性创新，动画杀手锏 @scroll-timeline。利用这个新特性，我们可以轻松的将原本基于时间控制的动画效果，交给页面的滚动特性进行控制，像是这样：只是，该特性由于诸多原因，遭到了...

很早之前，就写过一篇与原生嵌套相关的文章 -- CSS 即将支持嵌套，SASS/LESS 等预处理器已无用武之地？，彼时 CSS 原生嵌套还处于工作草案 Working Draft (WD) 阶段，而今天（2023-09-02），CSS 原生嵌套 Nesting 终于成为了既定的规范！

在 CSS 中，存在许多数学函数，这些函数能够通过简单的计算操作来生成某些属性值，例如在现代 CSS 解决方案：CSS 数学函数一文中，我们详细介绍了calc()：用于计算任意长度、百分比或数值型数据，并将其作为 CSS 属性值。min() 和 max()：用于比较一组数值中的最大值或最小值，也可以与任意长度、百分比或数值型数据一同...

本文，我们将一起学习，使用纯 CSS，实现如下所示的动画效果：上面的动画效果，非常有意思，核心有两点：小球随机做 X、Y 方向的直线运动，并且能够实现碰撞到边界的时候，实现反弹效果小球在碰撞边界的瞬间，颜色发生随机的变化嗯？很有意思的效果。看上去，我们好像使用 CSS 实现了碰撞检测。然而，实际情况真的是这样...

Anchor Position 的出现，极大的丰富了 CSS 的能力，虽然语法稍显复杂，但是有了它，能够实现非常多之前实现起来非常困难，或者压根无法使用纯 CSS 实现的功能。

最近，群友分享了一个很有意思的效果：原效果的网址：frosted-glass。该效果的几个核心点：毛玻璃磨砂效果卡片的 3D 旋转跟随效果整体透明度和磨砂感、以及卡片的 3D 形态会随着用户移动鼠标而进行动态变化原效果实现的较为复杂，并且实际体验卡顿感较强。本文，我们就将尝试一步一步用更为简单的方式还原复现这个效果。...

最近，群里面的同学发了这么一个非常有意思是动画效果：原效果地址 -- CodePen Demo -- Letter Hop当然，原效果，主要使用了 GSAP 动画库以及一个 3D 文字 JavaScript 库： {代码...} 但是，这个效果，其实本身并不复杂。本文，我们将不借助任何动画库，尝试用最简单的 CSS 和 JavaScript 代码还原一个类似的 Emoji 3D ...

最近，群友贴了一个非常有意思的动画效果，整体动画效果如下：点击某个按钮后，触发一个动画效果，原本的网格内容，将按顺序（又带点随机的效果）从高处下落进行加载填充动画。当然，我个人认为这个动画有点华而不实，主要体现在这个动画一次需要耗费较长时间，有点消磨人的耐心。不过确实一个很好的 CSS 动画教学案例。...

前不久，在网上看到这么一张非常有趣的图：想必很多同学都看到这张图，是一个开发小哥被一个日间/黑夜模式切换按钮效果逼疯的视频。其最终效果大致如下：原完整代码在这里：Night && Day Toggle ☀️/🌙 [Completed It!]原效果用了大量 HTML 标签，大量 SVG 元素以及 350 行的 CSS 完成的上述效果。而本文，我们将尝试优化...

在 CSS 中，存在许多数学函数，这些函数能够通过简单的计算操作来生成某些属性值，例如 ：calc()：用于计算任意长度、百分比或数值型数据，并将其作为 CSS 属性值。min() 和 max()：用于比较一组数值中的最大值或最小值，也可以与任意长度、百分比或数值型数据一同使用。clamp()：用于将属性值限制在一个范围内，支持三...

在业务中，有这么一种场景，表格下的某一列 ID 值，文本超长了，正常而言会是这样：通常，这种情况都需要超长省略溢出打点，那么，就会变成这样：但是，这种展示有个缺点，3 个 ID 看上去就完全一致了，因此，PM 希望能够实现头部省略打点，尾部完全展示，那么，最终希望的效果就会是这样的：OK，很有意思的一个需求，最...

最近，在 CodePen 上，看到一个非常有意思的图片动效，效果如下：原效果链接：CodePen Demo - 1 div pure CSS blinds staggered animation in 13 declarations本身这个动画效果，并没有多惊艳。惊艳的地方在于原作者的实现方式非常有趣，我们简单来看看： {代码...} {代码...} 怎么样，实际代码行数不错，大部分是注释。...

今日，群友提问，如何实现这么一个 Loading 效果：这个确实有点意思，但是这是 CSS 能够完成的？没错，这个效果中的核心气泡效果，其实借助 CSS 中的滤镜，能够比较轻松的实现，就是所需的元素可能多点。参考我们之前的：使用纯 CSS 实现超酷炫的粘性气泡效果巧用 CSS 实现酷炫的充电动画圆弧的实现首先，我们可能需要实...

对图片的性能优化及体验优化在今天就显得尤为重要。本文，就将从各个方面阐述，在各种新特性满头飞的今天，我们可以如何尽可能的对我们的图片资源，进行性能优化及体验优化。

最近，在看 LPL 比赛的时候，看到这样一个有意思的六芒星能力图动画：今天，我们就来使用纯 CSS 实现这样一个动画效果！实现背景网格对于如下这样一个背景网格，最好的方式当然肯定是切图。如果一定要使用 CSS，勉强也能做，这就涉及了不规则图形边框效果，我们有一些方式可以实现，可以参考一下这几篇文章：现代 CSS 高...

本文将介绍一个角向渐变的一个非常有意思的小技巧！我们尝试使用 CSS 绘制如下图形：在之前，类似的图案，其实我们有尝试过，在 单标签实现复杂的棋盘布局 一文中，我们用单标签实现了这样一个棋盘布局：那么，本文有什么特殊之处呢？让我们一探究竟。快速实现网格布局首先，上述的布局还是希望使用一个标签完成，这个没...

本文是系列第五篇，终章。系列文章：现代图片性能优化及体验优化指南 - 图片类型及 Picture 标签的使用现代图片性能优化及体验优化指南 - 响应式图片方案现代图片性能优化及体验优化指南 - # 缩放精细化展示及避免布局偏移、拉伸现代图片性能优化及体验优化指南 - 懒加载及异步图像解码方案图片资源，在我们的业务中可谓...