有趣的css - 代码瀑布加载动画（附源码+代码思路）

设计师工作日常

已于 2025-01-15 13:26:18 修改

阅读量1.2k

点赞数 33

分类专栏：有趣的css 文章标签： css 动效设计交互设计 ux/ui 加载动画前端

于 2024-10-29 13:19:42 首次发布

本文链接：https://blog.youkuaiyun.com/justliu1989/article/details/143326597

版权

有趣的css 专栏收录该内容

94 篇文章

订阅专栏

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

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

整体效果

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

🔑思路：
多个竖行排布文本，然后给文本加上动画属性，让多个文本不同次循环播放，形成代码瀑布效果。

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

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

核心代码

html 代码


<div class="loading79">
  <p class="p79">4rs<span class="i79-1">b</span>h<span class="i79">k</span>r</p>
  <p class="p79">_7u<span class="i79">i</span>90<span class="i79">@</span>v</p>
  <p class="p79">_7,=<span class="i79-1">j</span>ud<span class="i79">i</span>y</p>
  <p class="p79">d8<span class="i79-1">%</span>rg</p>
  <p class="p79"><span class="i79">d</span>oopd<span class="i79-1">e</span>g</p>
  <p class="p79">c4*<span class="i79-1">h</span>ld</p>
  <p class="p79">u<span class="i79">g</span>_^43<span class="i79">2</span>iu</p>
  <p class="p79">+o<span class="i79-1">0</span>u-i,</p>
</div>

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

css 部分代码

.loading79{
  width: 160px;
  height: 88px;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 4px;
  background-color: transparent;
  position: relative;
  overflow: hidden;
}
.p79{
  writing-mode: vertical-rl;
  font-size: 14px;
  line-height: 2;
  margin: 0;
  padding: 0;
  position: absolute;
  color: #43ff85;
  --left: 8px;
  --delay: 0.1s;
  animation: eff79 0.6s linear infinite;
}
.i79{
  color: #6c72fe;
}
.i79-1{
  color: #f7e543;
}
.p79:nth-child(1){
  left: var(--left);
}
.p79:nth-child(2){
  left: calc(var(--left)*3);
  animation-delay: var(--delay);
}
.p79:nth-child(3){
  left: calc(var(--left)*5);
  animation-delay: calc(var(--delay)*2);
}
.p79:nth-child(4){
  left: calc(var(--left)*7);
}
.p79:nth-child(5){
  left: calc(var(--left)*9);
}
.p79:nth-child(6){
  left: calc(var(--left)*11);
  animation-delay: calc(var(--delay)*3);
}
.p79:nth-child(7){
  left: calc(var(--left)*13);
}
.p79:nth-child(8){
  left: calc(var(--left)*15);
  animation-delay: calc(var(--delay)*4);
}
@keyframes eff79{
  0%{
    transform: translateY(-40%);
  }
  100%{
    transform: translateY(140%);
  }
}

1、定义基本的尺寸大小，给 p 元素增加 writing-mode: vertical-rl; 样式，定义文本垂直排布。

2、给 p 元素设置定位属性 position: absolute; ，然后利用 css 变量属性 --，自定义两个属性 --left: 8px;--delay: 0.1s; 。

3、统一给 p 元素增加 animation 动画属性 animation: eff79 0.6s linear infinite; ，定义动画关键帧 transform: translateY(n);，移动 p 元素的 Y 轴的值；然后利用 :nth-child(n) 选择器，分别给每个 p 元素设置不同的 left 以及 animation-delay ，让所有 p 元素交错进行动画。

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

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

注意：在给 p 元素定义不同的 left 以及 animation-delay 时，搭配了 -- 自定义属性（css变量）以及 var(...) 引用自定义属性值函数和 calc(...) 计算属性值函数。

完整代码如下

html 页面


<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>代码瀑布加载动画</title>
  </head>
  <body>
    <div class="app">
      <div class="loading79">
        <p class="p79">4rs<span class="i79-1">b</span>h<span class="i79">k</span>r</p>
        <p class="p79">_7u<span class="i79">i</span>90<span class="i79">@</span>v</p>
        <p class="p79">_7,=<span class="i79-1">j</span>ud<span class="i79">i</span>y</p>
        <p class="p79">d8<span class="i79-1">%</span>rg</p>
        <p class="p79"><span class="i79">d</span>oopd<span class="i79-1">e</span>g</p>
        <p class="p79">c4*<span class="i79-1">h</span>ld</p>
        <p class="p79">u<span class="i79">g</span>_^43<span class="i79">2</span>iu</p>
        <p class="p79">+o<span class="i79-1">0</span>u-i,</p>
      </div>
    </div>
  </body>
</html>

css 样式

.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading79{
  width: 160px;
  height: 88px;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 4px;
  background-color: transparent;
  position: relative;
  overflow: hidden;
}
.p79{
  writing-mode: vertical-rl;
  font-size: 14px;
  line-height: 2;
  margin: 0;
  padding: 0;
  position: absolute;
  color: #43ff85;
  --left: 8px;
  --delay: 0.1s;
  animation: eff79 0.6s linear infinite;
}
.i79{
  color: #6c72fe;
}
.i79-1{
  color: #f7e543;
}
.p79:nth-child(1){
  left: var(--left);
}
.p79:nth-child(2){
  left: calc(var(--left)*3);
  animation-delay: var(--delay);
}
.p79:nth-child(3){
  left: calc(var(--left)*5);
  animation-delay: calc(var(--delay)*2);
}
.p79:nth-child(4){
  left: calc(var(--left)*7);
}
.p79:nth-child(5){
  left: calc(var(--left)*9);
}
.p79:nth-child(6){
  left: calc(var(--left)*11);
  animation-delay: calc(var(--delay)*3);
}
.p79:nth-child(7){
  left: calc(var(--left)*13);
}
.p79:nth-child(8){
  left: calc(var(--left)*15);
  animation-delay: calc(var(--delay)*4);
}
@keyframes eff79{
  0%{
    transform: translateY(-40%);
  }
  100%{
    transform: translateY(140%);
  }
}