有趣的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);
  }
}