大家好，我是大澈！
本文约 900+ 字，整篇阅读约需 1 分钟。
每日分享一段优质代码片段。
今天分享一段优质 CSS 代码片段，实现打字机般的效果或其他类似的离散动画效果。
老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>CSS打字机效果</title><style>.text {border-right: 2px solid #eee;font-size: 28px;text-align: center;white-space: nowrap;overflow: hidden;background: #fff;}.useAnimation {animation: width-change 4s steps(44) 1s normal both,color-change 0.5s steps(44) infinite normal;}@keyframes width-change {from {width: 0;}to {width: 343px;}}/* 竖线的闪烁效果 */@keyframes color-change {from {border-right-color: #363636;}to {border-right-color: #ffffff;}}</style></head><body><p class="text useAnimation">欢迎投稿分享,优质代码片段</p></body>
</html>
分享原因
这段代码展示了如何使用 CSS 动画来创建文本打字效果，以及如何使光标闪烁。
这种动画效果通常用于增强用户界面的动态交互感。
例如：在博客文章或新闻网站中，使用这种效果可以突出显示重要的引用或关键信息，吸引读者的关注。
代码解析
1. 基本样式设置 .text
border-right: 2px solid #eee;：添加一个右边框，模拟光标效果。
white-space: nowrap;：防止文本换行。
overflow: hidden;：隐藏超出容器范围的内容。
2. @keyframes width-change
from { width: 0; }：起始状态宽度为 0。
to { width: 343px; }：结束状态宽度为 343px，可根据文本实际宽度自行调整。
3. @keyframes color-change
from { border-right-color: #363636; }：起始状态右边框颜色为深灰色。
to { border-right-color: #ffffff; }：结束状态右边框颜色为白色。
4. 应用动画 .useAnimation
animation：应用两个动画 width-change 和 color-change。
width-change 4s steps(44) 1s normal both：
动画 width-change 运行 4 秒。
动画延迟 1 秒开始。
normal 表示正常播放。
both 表示动画结束时保持最终状态。
steps(44) 会使动画在 4 秒内完成 44 步，每步大约 0.09 秒（4 秒除以 44 步）。这会产生一种逐步增加宽度的效果，类似于打字机一个字符一个字符显示的效果。
color-change 0.5s steps(44) infinite normal：
动画 color-change 运行 0.5 秒。
infinite 表示动画无限循环。
steps(44) 创建了一个分为 44 步的闪烁动画，每步大约 0.011 秒（0.5 秒除以 44 步），这会使光标看起来在不断闪烁。
- end -
