<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p>大家好，我是 Just，这里是「设计师工作日常」，今天给大家分享一个代码瀑布流效果。</p> 讯享网
💎知识点：
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，这里是「设计师工作日常」，求点赞求关注！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/158551.html