CSS动画实现文字逐渐展示效果

原创已于 2025-07-01 21:12:47 修改 · 226 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端 #html #动画

于 2025-07-01 21:10:56 首次发布

CSS动画实现文字逐渐展示效果

效果如下

动效

主要使用了下面的样式:
将文字的颜色设置成透明
背景绘制在前景文本内（剪切到前景文本）

	color: transparent;
    -webkit-background-clip: text;
    background-clip: text;

然后使用css的动画，控制文字的背景的位置和大小，来实现文字动起来的效果
背景的颜色写了两个渐变：
第一个渐变实现类似光标的效果，光标是从左到右依次移动的。因此第一个背景色大小固定，通过控制背景X方向位置，来实现光标从左到右的移动
第二个背景色，是控制整体文字从左到右依次出现的。因此这个背景色变化逻辑，是通过控制背景的size来实现从左到右逐渐显示文字的效果

background: -webkit-linear-gradient(left,
            #047C88 0%,
            rgb(255, 255, 255) 45%,
            rgb(255, 255, 255) 55%,
            #047C88 100%) no-repeat 100% center / 60px 60px, linear-gradient(to right, #047C88, #047C88) 0 0 / 100% 100%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;

<!DOCTYPE html>
<html>

<head>
  <style>
    .text-container {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100vw;
      height: 100vh;
    }

    .inspire-info-box {
      position: relative;
    }

    .inspire-info-bg {
      background-color: rgba(58, 156, 136, 0.29);
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: -1;

      top: 0;
      left: 0;
      animation: inspireInfoBg 0.7s ease;
    }

    .inspire-info {
      padding: 5px 20px;
      font-size: 40px;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 60px;

      color: transparent;
      background-repeat: no-repeat;
      -webkit-background-clip: text;
      background-clip: text;
      animation: inspireInfoTxtGreen 1.4s ease-out;
      animation-delay: 0.7s;
      animation-fill-mode: forwards;
    }

    @keyframes inspireInfoBg {
      0% {
        left: 0;
        transform: translate(-50%, 50%) scale(0);
      }

      100% {
        left: 0;
        transform: translate(0, 0) scale(1);
      }
    }

    @keyframes inspireInfoTxtGreen {
      0% {
        background: -webkit-linear-gradient(left,
            #047C88 0%,
            rgb(255, 255, 255) 45%,
            rgb(255, 255, 255) 55%,
            #047C88 100%) no-repeat -20% center / 60px 60px, linear-gradient(to right, #047C88, #047C88) 0 0/ 0 100%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
      }

      99% {
        background: -webkit-linear-gradient(left,
            #047C88 0%,
            rgb(255, 255, 255) 45%,
            rgb(255, 255, 255) 55%,
            #047C88 100%) no-repeat 100% center / 60px 60px, linear-gradient(to right, #047C88, #047C88) 0 0 / 100% 100%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
      }

      100% {
        background: #047C88;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
      }

    }
  </style>
</head>

<body>
  <div class="text-container">
    <div class="inspire-info-box">
      <div class="inspire-info">
        提供免费早餐哦!
      </div>
      <div class="inspire-info-bg">
      </div>
    </div>
  </div>
</body>

</html>