有趣的CSS - 文字加载动画效果-编程知识

有趣的CSS - 文字加载动画效果

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是用 css 实现多字符模拟加载动画效果。

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

整体效果

在这里插入图片描述

使用 animation 动画属性让每个字符上下动起来，形成视觉加载效果。

适用于加载页或底部刷新交互动画。

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

核心代码

html 代码

<div class="loading17"><span class="load-span17">F</span><span class="load-span17">U</span><span class="load-span17">N</span><span class="load-span17">C</span><span class="load-span17">S</span><span class="load-span17">S</span>
</div>

每个字符用 span 标签单独包裹。

css 部分代码

.loading17{height: 48px;font-size: 32px;font-weight: 700;letter-spacing: 24px;color: black;display: flex;justify-content: center;align-items: center;
}
.loading17 .load-span17{animation: text-load17 2.8s linear infinite;
}
.loading17 .load-span17:nth-of-type(1){color: #3185fa;animation-delay: 0.4s;
}
.loading17 .load-span17:nth-of-type(2){color: #fc3621;animation-delay: 0.8s;
}
.loading17 .load-span17:nth-of-type(3){color: #fcbb02;animation-delay: 0.12s;
}
.loading17 .load-span17:nth-of-type(4){color: #3285ff;animation-delay: 1.6s;
}
.loading17 .load-span17:nth-of-type(5){color: #2ab148;animation-delay: 2.0s;
}
.loading17 .load-span17:nth-of-type(6){color: #fb3320;animation-delay: 2.4s;
}
@keyframes text-load17{0%{transform: translateY(0);}50% {transform: translateY(-20px);}100%{transform: translateY(0);}
}

所有 span 标签设置 animation 动画参数，注意设置 infinite 参数，使动画循环播放；给每个 span 设置动画延迟，形成视觉加载效果。

完整代码如下

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="loading17"><span class="load-span17">F</span><span class="load-span17">U</span><span class="load-span17">N</span><span class="load-span17">C</span><span class="load-span17">S</span><span class="load-span17">S</span></div></div></body>
</html>

css 样式

/** style.css **/
.app{width: 100%;height: 100vh;background-color: #ffffff;position: relative;display: flex;justify-content: center;align-items: center;
}
.loading17{height: 48px;font-size: 32px;font-weight: 700;letter-spacing: 24px;color: black;display: flex;justify-content: center;align-items: center;
}
.loading17 .load-span17{animation: text-load17 2.8s linear infinite;
}
.loading17 .load-span17:nth-of-type(1){color: #3185fa;animation-delay: 0.4s;
}
.loading17 .load-span17:nth-of-type(2){color: #fc3621;animation-delay: 0.8s;
}
.loading17 .load-span17:nth-of-type(3){color: #fcbb02;animation-delay: 0.12s;
}
.loading17 .load-span17:nth-of-type(4){color: #3285ff;animation-delay: 1.6s;
}
.loading17 .load-span17:nth-of-type(5){color: #2ab148;animation-delay: 2.0s;
}
.loading17 .load-span17:nth-of-type(6){color: #fb3320;animation-delay: 2.4s;
}
@keyframes text-load17{0%{transform: translateY(0);}50% {transform: translateY(-20px);}100%{transform: translateY(0);}
}