iCSS
iCSS copied to clipboard
chokcoco
不止于 CSS
在之前，我们有一篇介绍带圆角的渐变边框的纯 CSS 实现的文章： + [巧妙实现带圆角的渐变边框](https://github.com/chokcoco/iCSS/issues/77) 会有这么一个话题的本质在于，在过往，想使用纯 CSS 实现纯粹的，内部透明渐变边框，是一件非常困难的事情，像是这样：  这个效果的几个核心难点： 1. 边框带渐变色 2. 边框支持设置 `border-radius` 3. 内部支持透明 思考一下，使用 CSS，我们可以如何实现这个效果？ ## 过往比较好的方法 之前有一个比较接近上面的诉求的方法。主要利用了 `clip-path` 和 `border-image`。 [clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)，大家应该都非常熟悉了。它可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。 简而言之，这里我们只需要在 `border-image`...
 CSS 中有一个非常有意思的模块 -- [CSS Motion Path Module Level 1](https://drafts.fxtf.org/motion-1/)，翻译过来也就是运动路径。本文将对 motion path 一探究竟，通过本文，你可以了解到： + 什么是 CSS motion path + 使用 CSS motion path 制作简单路径动画 + 使用 CSS motion path 制作复杂路径动画...
最近，在几个不同的群里都遇到有人在问同一个问题，如何使用 CSS 实现如下所示的单侧阴影：  也就是正常而言，阴影应该是出现在多条边上的，而现在，我们只希望阴影固定只能出现在某一侧。 单侧阴影其实是一个非常老生常谈的话题，在 CSS 中之前也有比较巧妙的方式实现。当然，CSS 发展到今天，我们有了更多种不同方式来实现单侧阴影这个需求。本文，我们一共会介绍现阶段，实现单侧阴影可行的三种方式： 1. 方法一：利用 `overflow: hidden` 隐藏三边 2. 方法二：利用 `box-shadow` 扩张半径可为负值 3. 方法三：使用 clip-path 实现任意方向上的裁剪 下面我们就一起来看看。 ## 方法一：利用 overflow: hidden 隐藏三边 这个应该是最容易想到的方式了，其思路也非常好理解： 1....
实现文 https://github.com/user-attachments/assets/c9ec9e89-d64b-43e0-af70-48f32237adf2 本水银流动动画，类似视频中的效果，动画跟随每个字母的轨迹
## 奇妙的 CSS shapes(CSS图形) CSS 发展到今天已经越来越强大了。其语法的日新月异，让很多以前完成不了的事情，现在可以非常轻松的做到。今天就向大家介绍几个比较新的强大的 CSS 功能： + **clip-path** + **shape-outside** shape 的意思是图形，CSS shapes 也就是 CSS 图形的意思，也就是使用 CSS 生成各种图形（**圆形、矩形、椭圆、多边形等几何图形**）。 CSS3之前，我们能做的只有矩形，四四方方，条条框框。 ## CSS3 CSS3出来后，我们有了更广阔的施展空间，通过 + `border-radius` + `border` + `transform`...
本文，我们来看这么个有意思的问题。使用 CSS，实现在页面屏幕中有一长串多行字母，现在需要随着页面滚动，改变每个字母的颜色。这也是掘金上一个同学的私信提问：  这里和这位同学细聊，他没有回复，有一个细节我没获取到，就是多行文本一开始是文字颜色是规律的还是不规律的，另外一个点，随着页面滚动，改变每个字母的颜色，需要有规律的改变，还是没有规律的改变？ 这问题细琢磨，还是非常有意思的，效果的核心是： 1. 多行文本，如何使用尽可能少的标签，让多行文本下的每一个字，呈现不一样的内容 2. 随着改动，如何去控制每一个字颜色的改变？ 带着这两个疑问，我们尝试使用 CSS 一步一步解决它！ ## 单个标签实现多行文本下单个文字不同颜色 我们先来看，如何使用单个标签实现多行文本下单个文字不同颜色。这是之前在 [【动画进阶】单标签下多色块随机文字随机颜色动画](https://github.com/chokcoco/iCSS/issues/247) 讲解过的一个技巧。 看看如下效果：  停顿 10s，思考一下，如果仅仅使用一个标签，实现上面的效果，这是可能的吗？ 这里，我们还可以利用内联元素的 `background` 展示特性来实现。 什么意思呢？其实 `background` 的展示，在 **块级元素状态** 和 **内联元素状态**...
这个问题源自于掘金上的一个留言，一个朋友问到，为什么我下面这段代码的高度过渡动画失效了？ 伪代码大概是这样： ```CSS { height: unset; transition: all 0.3s linear; will-change: height; &.up { height: 0; } &.down { height: unset; } } ``` 把它还原成一个实际的 Demo，效果大概是这样（本质想的想法是通过给元素切换它的 `.up`，`.down` 类，让它实现展开、合上的动画 ）： ...
开门见山，有这样一种非常常见的情况，对于一些可滚动的元素而言。通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动给该滚出了可视区域，类似这样：  可以看到，在滚动的过程中，会出现一条阴影：  对于两侧的列在滚动的过程中，静止不动，吸附在边界的问题，通常 CSS 使用 `position: sticky` 即可解决。 但是对于滚动过程中才出现的阴影（滚动容器内的内容没有贴边，则阴影出现，贴边，则阴影消失），之前的做法一直都是需要借助 JS 完成的。 那么，有没有纯 CSS 能够实现的方案呢？嘿嘿嘿，有。有一种非常讨巧的障眼法，下面就让我们来一步一步揭开它的面纱。 ## 神奇的 `background-attachment` 要使用纯 CSS 实现上述滚动阴影，最核心的要使用到的元素就是 `background-attachment`。 在较早的一篇文章里 -- [CSS 实现视差效果](https://github.com/chokcoco/iCSS/issues/37)，详细了介绍了 `background-attachment`，借助了 `background-attachment: fixed`...
从 Chrome 125 开始，支持了一个全新的 CSS 特性 - Anchor Positioning，翻译过来即是**锚点定位**。 在之前的文章中，我们较为系统的讲述了这个新特性的使用，感兴趣的可以翻开一下前文：[抢先体验！超强大的 Anchor Positioning 锚点定位](https://github.com/chokcoco/iCSS/issues/239)。 在本文中，我们将使用**锚点定位**，实现一个简化版本的 Popover 功能。下面，我们将一起一探究竟。 ## 传统 Popover 功能 长话短说，在日常的前端需求开发中，有这么一种场景，我们需要 hover 某个具体元素，以弹出一个弹出层，像是这样：  如果我们将弹出层的 DOM 结构，写在某个具体的元素内部，譬如放在与被 Hover 元素同级。如果被 Hover...
