当青训营遇上码上掘金
道阻且长，行则将至；行而不辍，未来可期。
1.名片设计：
- 实现文字打字展示效果
- 内容居中显示
2.文字打字效果实现
打字机效果很容易制作，要理解本文，你需要掌握CSS和CSS动画的基本知识。
首先来解释一下打字机效果的实现方式:打字机动画将通过使用CSS steps()函数一步一步地将文本元素的宽度从0更改为100%，从而显示文本元素。
首先为文本新建一个div容器，放置展示文本。
<div class="content"></div>
文本放置于内部div中
<div class="content">
<div class="info">Hello! I'm QW.</div>
<div class="text"> I'm a web developer.</div>
</div>
只为文本Hello! I'm QW.添加打字效果
该类的相关样式解释如下：
"overflow: hidden;"和"width: 0;"，以确保在输入效果开始之前不会显示文本内容。
制作显示文本动画：
打字机动画将创建一个效果，一个字母一个字母地打印出输入元素中的文本。我们将使用@keyframes CSS动画实现这个效果:
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
上述动画所做的只是将元素的宽度从0更改为100%。
现在，我们将在我们的键入类中包括这个动画，并设置其动画方向为forward，以确保文本元素在动画完成后不会返回width: 0:
为info类添加动画：typing 3s steps(20, end) forwards;
-
文本即可简单的从左往右平稳的显示。
-
使用
CSS steps()函数将typing动画分为20个步骤。
代码源码：
