css grid布局实现瀑布流（纯css实现瀑布流）

编程日记 • 2026-02-23 10:40 • 阅读 11

大家好，我是 Just，这里是「设计师工作日常」，今天给大家分享一个代码瀑布流效果。

💎知识点：
1️⃣ animation 动画属性
2️⃣ writing-mode 文本排布属性
3️⃣ :nth-child(n) 选择器
4️⃣ – 自定义属性（css变量）以及 var(…) 引用自定义属性值函数和 calc(…) 计算属性值函数

小尺寸的代码瀑布效果，使用了防溢出，在大页面中使用时，可取消溢出限制，再增加多个竖行文本，修改部分css样式，形成大的代码瀑布效果。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

页面主体，多个标签文本。

1、定义基本的尺寸大小，给素增加样式，定义文本垂直排布。

2、给素设置定位属性，然后利用变量属性，自定义两个属性。

3、统一给素增加动画属性，定义动画关键帧，移动素的 Y 轴的值；然后利用选择器，分别给每个素设置不同的以及，让所有素交错进行动画。

4、在每个标签内，再分别定义几个素，然后给这个几个素定义不同的字体颜色，这样动画在播放时，让视觉更丰富一点。

5、根据选择器，给按钮主体标签添加字体颜色，让按钮文字颜色从黑色过渡到白色，同样设置过渡延迟时间，让字体颜色在伪素矩形之后衔接过渡。

注意：在给素定义不同的以及时，搭配了自定义属性（css变量）以及引用自定义属性值函数和计算属性值函数。

以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。

[1] 原文阅读

[2] 《有趣的css》，访问网址：funcss.liujueyi.cn，欢迎大家访问。

我是 Just，这里是「设计师工作日常」，求点赞求关注！

今天的文章 css grid布局实现瀑布流（纯css实现瀑布流）分享到此就结束了，感谢您的阅读。