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



大家好，我是 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，这里是「设计师工作日常」，求点赞求关注！

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/14312.html