摘要：
最近，群里在讨论这么一个有趣的交互效果，来源于：vueflow.dev： 通过审查元素，发现原效果借助了 Canvas 实现。 思索了一番，觉得这个效果利用 CSS 配合部分 Javascript 代码完全也是可以做到的。 于是动手尝试了一番，最终完美的复刻了该效果： 过程中还是有非常多有意思的技巧 阅读全文
摘要：
最近，群里在讨论一个很有意思的线条动画效果，效果大致如下： 简单而言，就是线条沿着不规则路径的行进动画，其中的线条动画可以理解为是特殊的光效。 本文，我们将一起探索，看看在不使用 JavaScript/Canvas 的基础上，使用纯 CSS/SVG 的方式，我们可以如何大致的还原上述的线条动画效果。 阅读全文
摘要：
最近，群里聊到了一个很有意思的布局效果。大致效果如下所示，希望使用 CSS 实现如下所示的布局效果： 正常而言，我们的 HTML 结构大致是如下所示： <div class="g-container"> <div class="g-nav"> <ul> <li>Tab 1</li> <li>Tab 阅读全文
摘要：
accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候，更深入的了解了一下这个属性。 简单而言，CSS accent-color 支持使用几行简单的 CSS 为表单元素着色，是的，只需几行代码就 阅读全文
摘要：
最近，有群里在群里发了这么一个非常有意思的卡片 Hover 动效，来源于此网站 -- key-drop，效果如下： 非常有意思酷炫的效果。而本文，我们不会完全还原此效果，而是基于此效果，尝试去制作这么一个类似的卡片交互效果： 该效果的几个核心点： 卡片的 3D 旋转跟随鼠标移动效果 如何让卡片在 H 阅读全文
摘要：
在 23 年的 CSS 新特性中，有一个非常重要的功能更新 -- 相对颜色。 简单而言，相对颜色的功能，让我们在 CSS 中，对颜色有了更为强大的掌控能力。 其核心功能就是，让我们能够基于一个现有颜色 A，通过一定的转换规则，快速生成我们想要的颜色 B。 其功能能够涵盖： 精简 调暗 饱和度 降低饱 阅读全文
摘要：
今天，我们来看这么一个非常常见的切图场景，我们需要一个带圆角的虚线边框，像是这样： 这个我们使用 CSS 还是可以轻松解决的，代码也很简单，核心代码： div { border-radius: 25px; border: 2px dashed #aaa; } 但是，原生的 dashed 有一个问题， 阅读全文
摘要：
在页面布局中，我们经常会遇到/使用这么一类常见的布局，也就是列表内容水平居中于容器中，像是这样： <ul class="g-contaner"> <li></li> <li></li> </ul> ul { width: 500px; display: flex; flex-direction: r 阅读全文
摘要：
最近，相信大家一定被这么个动效给刷屏了： 以至于，基于这个效果的二次创作层出不穷，眼花缭乱。 基于跨窗口通信的弹弹球： 基于跨窗口通信的 Flippy Bird： 我也尝试制作了一个跨 Tab 窗口的 CSS 动画联动，效果如下： 代码不多，核心代码 200 行，感兴趣的可以戳这里：Github - 阅读全文
摘要：
最近在群里，有个小伙伴问了这么一道很有趣的问题： CSS 能否实现，容器再某个高度下是某种表现，一旦超出某个高度，则额外展示另外一些内容 为了简化实际效果，我们看这么一张示意效果图： 可以看到，当容器高度没有超过某一个值时，没有箭头图标。反之，箭头图标出现。 这个效果在很多场景都会出现，可以算是一个 阅读全文