纯CSS模拟打字机效果：将文本动画拆分为三层

前端

2024-01-14 07:25:30

纯CSS模拟打字机效果是一个引人入胜的交互设计，它让人联想到经典打字机的怀旧魅力。通过将文本动画分解为三个不同的层，我们可以使用HTML和CSS的力量重现这种迷人的效果。

一层：静态文字

该层包含要显示的文本。重要的是要记住，文本本身将保持静止，而其他层将负责创建打字机的动画效果。

二层：动态背景

这一层充当一个遮罩，覆盖在文本之上。动画开始时，它覆盖所有文本。随着动画的进行，它将从左向右移动，露出下面的文本。

三层：光标

光标是打字机效果的一个重要组成部分。它放置在最左边的文本旁边。当动画进行时，它将保持在文本的末尾，模拟打字机的行为。

实施步骤

创建基本HTML结构：

<div id="typewriter">
  <p>这里填写你的文字</p>
</div>

添加CSS样式：

#typewriter {
  position: relative;
  width: 600px;  /* 容器宽度 */
  height: 200px; /* 容器高度 */
}

#typewriter p {
  position: absolute;
  top: 0;
  left: 0;
  color: #000;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;  /* 背景颜色 */
  animation: type-background 5s steps(30) infinite;
}

@keyframes type-background {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

#cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 20px;
  background-color: #000;  /* 光标颜色 */
  animation: type-cursor 5s steps(30) infinite;
}

@keyframes type-cursor {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}