超酷的打字机效果？分享 1 段优质 CSS 代码片段！这段代码展示了如何使用 CSS 动画来创建文本打字效果，以及如何使
大家好，我是大澈！
本文约 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 -
转载自:https://juejin.cn/post/7386594813511827508