层叠样式表（CSS）自其诞生以来，经历了巨大的发展。 随着语言的不断演进和功能的增强，仅仅使用CSS就可以实现许多您可能意想不到的效果。
CSS 最显著的进步之一，在于其功能的出现和完善，这极大地提升了网页内容样式设计的能力和灵活性。
什么是打字机效果？
打字机效果是一种文本动画技巧，通过模拟文本逐渐显现的过程，模仿在观看者眼前逐字打出的效果。 这种效果让人联想起老式打字机、早期的计算机终端或命令行界面（CLI）的操作方式。
文字的逐步呈现，为页面增添了一丝神秘感和期待感，吸引观看者更加关注正在展示的内容。
CSS Steps()函数的工作原理
CSS中的函数引入了很高的灵活性，这在过去仅使用静态样式时是难以实现的。 `steps()` 函数是CSS动画中常用的函数。 它允许动画以离散的、阶梯式的步骤进行，而不是平滑过渡。
`steps()` 是一个动画计时函数，它接收两个参数。 第一个参数表示动画需要执行的步数。 第二个参数定义每个步骤的行为。 `steps()` 函数的基本语法如下：
animation-timing-function: steps(n, direction)
在上面的代码中，`steps()` 函数有两个参数：`n` 和 `direction`。 `direction` 参数可以是 `start` 或 `end`。
设置 `start` 方向可以确保动画在开始后立即完成第一步。 但是，将方向设置为 `end` 将在动画完成时执行最后一步。 为了演示 `steps()` 函数的使用方法，请查看以下 HTML 代码：
<div class="container">
<div></div>
</div>
以上代码定义了一个包含子 div 的容器 div。 如果你想让子 div 滑过屏幕，可以使用 CSS 动画，如下所示：
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
上面的代码段利用 `@keyframes` 规则定义了一个名为 `movebox` 的动画。 然后将此动画应用于子 div，使其在无限循环中平滑地在屏幕上移动。
如果你不喜欢平滑的动画并希望实现一种“断断续续”的效果，你可以使用 `steps()` 函数，如下所示：
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
animation-timing-function: steps(10, end);
}
正如你在下面的 GIF 演示中看到的，结合参数值为 `10` 的 `steps()` 函数，将使子 div 以分步的方式动画，而不是平滑地动画。 步骤的数量越多，动画看起来越不那么“断续”。
在上面的示例中，提供了 `direction` 参数。 但是，如果省略 `direction` 参数，浏览器将默认使用 `end` 作为方向值。
创建打字机效果
现在你已经理解了 `steps()` 函数的工作原理，是时候将你所学的付诸实践了。 创建一个新的文件夹，并为其命名。 在该文件夹中，添加一个用于标记的 `index.htm` 文件和一个用于样式设置的 `style.css` 文件。
在 `index.htm` 文件中，添加以下基础代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文档</title>
<link rel="stylesheet" href="https://wilku.top/how-to-create-a-typewriter-effect-with-css/style.css" />
</head>
<body>
<div class="container">
<div class="text">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Reiciendis, tempore!
</div>
</div>
</body>
</html>
上面的代码定义了一个简单 HTML 网站的基础结构。 它包含一个容器 div，其中嵌套了一个包含一些虚拟文本的 div。
动画文本
打开 `styles.css` 文件，并将容器 div 的宽度设置为其内容的宽度：
.container{
width: fit-content;
}
接下来，使用 `@keyframes` 规则定义一个动画，控制动画随时间的变化。 在 0% 的位置将宽度设置为“0%”。 在 100% 的位置，将宽度设置为“100%”，如下所示：
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
接下来，选中具有 `text` 类名的元素，并将 `overflow` 属性设置为 `hidden`。 这样做可以确保在打字效果开始之前，文本保持隐藏状态。 完成此操作后，通过将 `white-space` 属性设置为 `nowrap`，确保文本保持在一行上。 为文本类指定等宽字体，并在文本右侧添加一个绿色的垂直边框。
该边框将模拟光标的外观。 将适当的字体大小和动画属性设置为 `type-text`。 最后，将 `steps()` 函数添加到 `animation-timing-function` 中。
.text {
overflow: hidden;
white-space: nowrap;
font-family: "Courier New", Courier, monospace;
border-right: solid 10px green;
font-size: 23px;
animation: type-text forwards 4s;
animation-timing-function: steps(40);
}
当您在浏览器中运行代码时，您应该看到以下效果：
如果你想要更长的打字效果，可以调整 `steps()` 函数中指定的动画时长和步数。
使光标栩栩如生
打字机效果几乎完成，但缺少一个关键功能：闪烁的光标。 回想一下，在最后一个代码块中，我们在文本上设置了一个右边框作为光标。 您也可以使用 `@keyframes` 规则为该光标添加动画效果。
@keyframes cursor-blink {
0% {
border-color: transparent;
} 100% {
border-color: green;
}
}
在定义了自定义动画之后，将动画名称添加到文本类的 `animation` 属性中，并将持续时间设置为 0.6 秒。
.text{
animation: type-text forwards 4s,
cursor-blink .6s infinite;
}
现在，当您运行代码时，您应该会看到一个闪烁的光标。
CSS 函数的力量
CSS 函数彻底改变了网站的构建方式，为开发人员提供了强大的工具集。 这些多功能函数实现了动态样式和交互，这些功能在过去只能通过复杂的脚本语言实现。
从颜色操作到响应式布局、动画和创意转换，CSS 函数极大地扩展了网页设计的可能性。 借助灵活计算的 `calc()`、用于创建惊艳背景的 `linear-gradient()` 以及用于迷人动画的 `translate()` 等函数，您可以创建视觉上吸引人且引人入胜的用户体验。