如何为您的网站创建 CSS 打字机效果

DigvijayDD · 发表于 2024-1-10 13:03:30

在本文中，您将学习如何使用纯 CSS 中的打字机效果使网站的文本变得动态且更具吸引力。 Play Next Unmute Current Time 0:00 / Duration 2:00 Fullscreen Backward Skip 10s Play Video Forward Skip 10s 打字机效果涉及逐渐显示文本，就好像它是在您眼前打字一样。 “Web 开发人员”一词的打字机动画在文本块中添加打字机效果可以帮助吸引网站访问者并保持他们进一步阅读的兴趣。打字机效果可用于多种用途，例如制作引人入胜的登陆页面、号召性用语元素、个人网站和代码演示目录打字机效果很容易创建学习使用 JavaScript 编码打字机效果很容易制作，为了理解本教程，您所需要的只是 CSS 和 CSS 动画的基本知识。这是打字机效果的工作方式：打字机动画将使用 CSS 函数逐步将文本元素的宽度从 0 更改为 100%，从而显示文本元素steps()。

闪烁动画将为“输入”文本的光标设置动画。为我们的打字效果创建网页让我们首先为打字机演电话号码列表示创建网页。它将包含一个<div>用于存放打字机文本的容器，其类别为typed-out： <!doctype html> <html> <head> <title>Ty元素后将光标停止在元素的最后一个字母处，就像打字机（或实际上是文字处理器）一样，我们将为该typed-out元素创建一个容器，并添加display: inline-block;： .container { display: inline-block; } 制作显示文本动画打字机动画将创建typed-out元素内的文本逐个字母地打字的效果。我们将使用@keyframesCSS 动画规则： @keyframes typing { from { width: 0 } to { wid右的一个平滑步骤简单地显示： Learn to Code with JavaScript 添加步骤以实现打字机效果到目前为止，我们的文本已经显示出来，但是以一种平滑的方式显示，并没有逐个字母地显示文本。这是一个开始，但显然这不是打字机效果的样子。

为了使这个动画逐个字母地显示我们的文本元素，或者像打字机那样以步骤的方式显示，我们需要将类typing包含的动画拆分typed-out为步骤，以便它看起来像是正在打字。这就是steps()CSS 函数的用武之地： .typed-out{ overflow: hidden; border-right: .15em solid orange; white-space: nowrap; font-size: 1.6rem; width: 0; animation: typing 1s steps(20, end) forwards; } typing正如您所看到的，我们使用 CSS函数将动画分为 20 个步骤steps()。这就是我们现在看到的：这是到目前为止我们的完整代码： Learn to Code with JavaScript <html> <head> <title>Typewriter 径，调整其闪烁效果的频率等等。您可以在 CodePen 演示中试验这些属性，看看您还能想出什么！结合打字机文本动画的元素现在您已经知道如何在 CSS 中制作打字机效果了，现在是我演示这种打字效果的一些实用且相关的用例的时候了。投资组合打字效果 Learn to Code with JavaScript 这是个人作品集的示例。打字机效果可以使您的网络简历/个人网站脱颖而出，并使其更具吸引力。通过打字效果显示投资组合文本行您可以在CodePen上尝试这个作品集演示。 API打字效果以下是 API 登录页面的示例。 API 代码在打字机模式下泄露您可以在CodePen上尝试这个 API 演示。在您的开发之旅中的某个时刻，您可能会遇到 API 提供商登录页面并看到类似的代码块，演示其 API 的实现。

		自动登录	找回密码
密码			注册