大家好,我是大澈!
本文约 900+ 字,整篇阅读约需 1 分钟。
每日分享一段优质代码片段。
今天分享一段优质 CSS 代码片段,实现打字机般的效果或其他类似的离散动画效果。
老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!
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 -