文字叠加动画css

在网页设计中，文字是重要的视觉元素之一，我们可以利用 css 动画效果来使文字更加生动有趣。其中，文字叠加动画效果非常热门，它能够让文字之间产生交错、错位等视觉冲击力，增强网站的视觉效果。这里我们将介绍如何通过 css 实现文字叠加动画效果。

实现方式

具体步骤

1. HTML 中放置需要应用叠加动画的文字文本
2. 使用 css 设置好文本的初始状态和结束状态
3. 通过 css 中的动画属性将文字从初始状态到结束状态进行过渡

代码实现

HTML

<div class="text-container">
      <h1>
        <span>C</span><span>S</span><span>S</span>
      </h1>
      <p>
        <span>Cascading</span><br /><span>Style Sheets</span>
      </p>
    </div>

在这段 HTML 代码中，我们通过 span 标签单独包装了每个字母，这样我们就可以给每个字母应用不同的样式，从而实现文字叠加的效果。

CSS

.text-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

h1 {
  font-size: 12em;
  margin-bottom: 0.1em;
}

h1 span {
  display: inline-block;
  transform-origin: center;
  transform: scale(1);
  animation: scale 3s infinite;
  animation-delay: calc(0.1s * var(--i));
}

@keyframes scale {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.1);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

p span {
  position: relative;
  top: -0.5em;
  opacity: 0;
  animation: slide 1s forwards;
  animation-delay: calc(0.1s * var(--i) + 1.5s);
}

@keyframes slide {
  from {
    top: 0;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

其中，具体的实现细节如下：

• h1 span——通过 transform: scale 设置初始状态和结束状态，从而实现缩放的动画效果；
• @keyframes ——通过关键帧动画即可让文字产生不同的变形效果；
• p span——通过 position: relative 和 top 属性使文字叠加在一起，同时通过opacity属性控制渐变显示的效果。

总结

通过上述介绍，我们可以看到，在 css 中实现文字叠加动画是非常简单的。最终实现的效果如下：

参考链接：

1. CSS Text Effects
2. How to Create Overlapping Text with CSS