📅 最后修改于: 2023-12-03 14:51:53.335000 🧑 作者: Mango
打字机动画是指文字在屏幕上一个一个地出现，就像打字机一样打字的效果。在网页设计中，这种打字机效果可以为文字添加一些动态性，增强页面的视觉效果。下面我们就来介绍如何使用 HTML 和 CSS 创建打字机动画。
首先，我们需要在 HTML 中创建一个容器，用于承载动画效果。具体的代码如下：
<div class="typewriter">
<h1>打字机效果</h1>
</div>
其中，我们使用了 div 元素作为容器，class="typewriter" 用于指定该容器将会应用打字机效果。我们还在容器中创建了一个 h1 元素，这个元素将会是打字机效果的展示元素。
接下来，我们需要使用 CSS 来实现打字机效果。具体的代码如下：
.typewriter h1 {
overflow: hidden;
/* 设置背景色为透明，下一步过渡效果需要 */
background-color: transparent;
/* 设置从第 1 个字符开始出现 */
animation: typing 5s steps(30, end), blink-caret .75s step-end infinite;
}
/* 打字过渡效果 */
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
/* 光标效果 */
@keyframes blink-caret {
from, to {
border-color: transparent;
}
50% {
border-color: orange;
}
}
以上代码主要做了以下几个事情：
.typewriter h1 来指定打字机效果应用到了哪个元素上。typing，关键帧中，由 width: 0; 开始，到 width: 100%; 结束。steps(30, end) 表示字符串被分成 30 个步骤，并在最后一个步骤停止。blink-caret 的动画，用于添加光标效果。此动画在 50% 处派生了一个新关键帧，用于设置光标的闪烁颜色。最后，我们来看一下完整的打字机效果。将上面提到的 HTML 和 CSS 代码加入到 HTML 文件和 CSS 文件中即可。
完整代码
<!DOCTYPE html>
<html>
<head>
<title>打字机效果</title>
<style>
.typewriter h1 {
overflow: hidden;
/* 设置背景色为透明，下一步过渡效果需要 */
background-color: transparent;
/* 设置从第 1 个字符开始出现 */
animation: typing 5s steps(30, end), blink-caret .75s step-end infinite;
}
/* 打字过渡效果 */
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
/* 光标效果 */
@keyframes blink-caret {
from, to {
border-color: transparent;
}
50% {
border-color: orange;
}
}
</style>
</head>
<body>
<div class="typewriter">
<h1>打字机效果</h1>
</div>
</body>
</html>
以上就是使用 HTML 和 CSS 创建打字机动画的具体步骤和代码。通过上述代码，我们可以轻松实现打字机效果，增强网页的视觉效果。