CSS怎样制作文字逐字显示效果？animation steps分帧动画-css教程-PHP中文网

CSS怎样制作文字逐字显示效果？animation steps分帧动画

絕刀狂花

发布： 2025-08-24 09:11:01

原创

745人浏览过

CSS实现文字逐字显示的核心是利用animation的steps()函数，将动画分割为离散步骤，使文本像打字机一样逐字出现。首先通过设置width:0和overflow:hidden隐藏文本，再用animation配合steps()函数逐步增加宽度，实现逐字显示效果。steps()函数接受两个参数：步数和起始时机（start或end），默认为end，表示在每步结束时更新样式。为提升性能，应避免触发重排的属性动画，可使用will-change或硬件加速优化渲染。响应式设计中，推荐使用相对单位（如vw、em）、媒体查询调整动画时长，或结合JavaScript动态计算文本长度与动画时间，确保不同屏幕下的良好表现。光标闪烁效果通过border-right与blink-caret动画实现，增强视觉反馈。

CSS实现文字逐字显示，核心在于利用

animation

登录后复制

的

steps()

登录后复制

函数，模拟打字机效果。它将动画过程分割成多个离散的步骤，让文字像打字一样一个字一个字地出现。

解决方案

首先，我们需要一个包含文本的HTML元素，比如一个

<p>

登录后复制

标签。然后，通过CSS控制这个元素的宽度，并使用

overflow: hidden

登录后复制

隐藏超出宽度的文本。接下来，使用

animation

登录后复制

属性，结合

steps()

登录后复制

函数，让宽度从0逐渐增加到完整文本的宽度，从而实现逐字显示的效果。

<p class="typing-text">Hello, world! This is a typing effect.</p>

登录后复制

.typing-text {
  width: 0;
  overflow: hidden;
  white-space: nowrap; /* 防止文本换行 */
  border-right: .15em solid orange; /* 添加闪烁的光标 */
  animation: typing 4s steps(40, end) forwards, /* 4s 是动画总时长, 40 是字符数 */
             blink-caret .75s step-end infinite;
}

/* typing 动画 */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* 光标闪烁动画 */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

登录后复制

这里，

steps(40, end)

登录后复制

表示将动画分割成40步（假设文本有40个字符），

end

登录后复制

表示在每一步的结束时应用样式。

forwards

登录后复制

表示动画结束后保持最后一帧的状态。光标闪烁动画用了

step-end

登录后复制

，确保光标在开始和结束时才改变颜色，形成清晰的闪烁效果。

立即学习“前端免费学习笔记（深入）”；

CSS动画的

steps()

登录后复制

函数原理是什么？

steps()

登录后复制

函数是CSS

animation-timing-function

登录后复制

的一个值，它允许我们将动画分割成离散的步骤，而不是平滑的过渡。它接受两个参数：第一个参数指定步骤的数量，第二个参数指定在每个步骤的开始还是结束时应用样式。常见的取值有

start

登录后复制

和

end

登录后复制

。

start

登录后复制

表示在步骤的开始时应用样式，

end

登录后复制

表示在步骤的结束时应用样式。如果省略第二个参数，默认值为

end

登录后复制

。

例如，

steps(10, start)

登录后复制

会将动画分割成10个步骤，并在每个步骤的开始时应用样式。这意味着在动画的初始状态，样式会立即应用，并在每个步骤的开始时更新。这与

end

登录后复制

的行为相反，

end

登录后复制

会在每个步骤的结束时应用样式。

如何优化CSS文字逐字显示效果的性能？

性能优化主要集中在减少重绘和重排。

避免不必要的属性动画： 尽量只动画
```
width
```
登录后复制
这类不会触发大量重绘的属性。如果需要改变颜色或其他属性，尽量使用
```
will-change
```
登录后复制
属性提前告知浏览器，让它进行优化。
使用
requestAnimationFrame
登录后复制
：如果需要更精细的控制，可以使用JavaScript结合
```
requestAnimationFrame
```
登录后复制
来更新文本的显示。
```
requestAnimationFrame
```
登录后复制
会在浏览器下一次重绘之前执行，可以确保动画的流畅性。

小微助手 微信推出的一款专注于提升桌面效率的助手型AI工具

249

查看详情
减少DOM操作： 避免在动画过程中频繁修改DOM。如果需要动态改变文本内容，可以先在内存中构建好完整的文本，然后一次性更新DOM。
字体优化： 使用体积较小的字体，并确保字体已经预加载。
硬件加速： 确保动画使用了硬件加速。现代浏览器通常会自动进行硬件加速，但可以通过
```
transform: translateZ(0)
```
登录后复制
或
```
backface-visibility: hidden
```
登录后复制
等技巧来强制启用硬件加速。

如何让CSS文字逐字显示效果支持响应式布局？

响应式布局的关键在于让文本的宽度能够根据屏幕大小自动调整。

使用相对单位： 使用
```
em
```
登录后复制
、
```
rem
```
登录后复制
或
```
vw
```
登录后复制
等相对单位来定义文本的宽度和字体大小。这样，文本的宽度可以根据父元素的字体大小或视口宽度自动调整。
媒体查询： 使用媒体查询来根据不同的屏幕大小调整动画的时长和步数。例如，在小屏幕上，可以减少动画的时长，让文本显示得更快。
弹性布局： 使用弹性布局（Flexbox）或网格布局（Grid）来控制文本的布局。这样，文本可以自动适应父元素的宽度。
JavaScript动态调整： 可以使用JavaScript来动态计算文本的宽度和动画的时长，并根据屏幕大小进行调整。这可以提供更精细的控制。例如，可以监听
```
resize
```
登录后复制
事件，并在屏幕大小改变时重新计算文本的宽度和动画时长。

window.addEventListener('resize', function() {
  // 重新计算文本宽度和动画时长
  let textElement = document.querySelector('.typing-text');
  let textLength = textElement.textContent.length;
  let newWidth = textElement.offsetWidth; // 获取当前元素的宽度
  let animationDuration = textLength * 0.1; // 假设每个字符需要0.1秒

  textElement.style.animation = `typing ${animationDuration}s steps(${textLength}, end) forwards, blink-caret .75s step-end infinite`;
});

登录后复制

注意，上述代码只是一个简单的示例，实际应用中可能需要更复杂的逻辑来处理不同屏幕大小下的文本布局。

以上就是CSS怎样制作文字逐字显示效果？animation steps分帧动画的详细内容，更多请关注php中文网其它相关文章！