惊艳的打字机效果：揭秘优质CSS代码实现细节
发表时间: 2024-07-02 16:11
大家好，我是大澈！
本文约 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 -
鲁公网安备37020202000738号