整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
家好，我是大澈！
本文约 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 -
C#中，字符串字面量可以使用不同的引号来定义，每种方式都有其特定的用途和特性。
@"" (Verbatim String Literals)
使用@符号开始一个字符串字面量时，实际上创建了一个所谓的“原样”或“逐字”字符串。这意味着字符串中的所有字符都将被按照它们出现的方式处理，包括转义序列。例如，\n在普通字符串中表示换行符，但在逐字字符串中，它将被视为两个字符：反斜杠（\）和字母n。
string path=@"C:\folder\file.txt";在这个例子中，字符串包含了实际的字符C:\folder\file.txt，而不是尝试去解释其中的转义序列。
""" (Triple-quoted String Literals)
从C# 11开始，可以使用三个双引号（"""）来创建多行字符串字面量。这种类型的字符串允许你在不使用转义序列的情况下包含换行符和引号。这在编写长文本或HTML代码块时非常有用，不必担心转义引号或换行符。
以下HTML标记用于格式化网页上文本的外观。这可以使网页变得更加生动，但是，文本格式的太多变化也会使人不快。
head标记有6个级别可用，从h1用于最大和最重要的标题，到h6是最小的标题。
b标记之间的文本以粗体显示，与周围的文本相对突出。
i标记以一个小角度显示文本。
u标记在文本正文添加一条线，请注意，链接已经有下划线，不需要额外的标记。
strike标记在文本的正中间画一条线，通常用来表示文本是旧的，不再相关，删除。也可以用<s></s>代替。
pre标记之间的任何文本，包括空格、回车符和标点符号，都将像在文本编辑器中一样显示在浏览器中（通常浏览器会忽略多个空格）
code标记之间的文本以固定宽度字体显示，通常在显示源代码时使用。
tt标记之间的文本就像是用打字机打出了一个固定宽度的文字。
blockquote标记定义一个块引用，并且在块的左右添加额外的边距。
small标记让你无需设置字体大小，就可以使文本呈现比周围稍小的外观。
font标记的color属性改变几个字或一段文字的颜色。属性使用十六进制颜色代码。
font标记的size属性改变字体的大小，值范围从1到7，1是最小，7是最大。
font标记的size属性还可以相对于其前面的字体大小的作即时更改，此用法将按你指定的数字增减字体大小。例如：<font size="-1">一些文本</font>
font标记的face属性以指定的字体显示文本，值为字体名称，如“Helvetica”、“Arial”或“Courier”。
center标记之间的所有内容都居中。
em标记用于强调文本，文本通常以斜体显示，可能会根据浏览器的不同而有所不同。
strong标记用于着重强调文本，通常以粗体显示，可能会根据浏览器的不同而有所不同。
下面是以上标记的示例：
浏览器显示内容如下所示：
*请认真填写需求信息，我们会在24小时内与您取得联系。
