摘要：
今天我们来学习一个有意思的多行文本输入打字效果，像是这样： 这个效果其实本身并非特别困难，实现的方式也很多，在本文中，我们更多的会聚焦于整个多行打字效果最后的动态光标的实现。 也就是如何在文本不断变长，在不确定行数的情况下，让文字的最末行右侧处，一直有一个不断闪烁的光标效果： 单行文本打字效果 在此 阅读全文
摘要：
Chrome 在 121 版本开始，原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。 要知道，在此前，虽然有 ::-webkit-scrollbar 规范可以控制滚动条，可是，::-webkit-scrollbar 是非标准特性，在 MDN 文 阅读全文
摘要：
最近，群里在讨论这么一个有趣的交互效果，来源于：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 阅读全文