如何为您的网站创建CSS打字机效应-css教程-PHP中文网

首页

web前端

css教程

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

尊渡假赌尊渡假赌尊渡假赌

Feb 08, 2025 am 10:20 AM

纯CSS打造引人入胜的打字机文本效果

核心要点：

CSS打字机效果通过逐步显示文本，使网站内容更具活力和吸引力，可用于登录页面、个人网站和代码演示。
打字机效果可通过使用CSS steps()函数将文本元素的宽度从0%更改为100%，并通过动画模拟“打出”文本的光标来创建。
可以通过增加或减少打字动画的步数和持续时间来调整打字效果，以适应较长或较短的文本。
打字机效果可以与闪烁的光标动画结合使用以增强效果，并且可以通过调整其border-right属性、颜色、闪烁频率等来自定义光标。

本文将指导您如何使用纯CSS创建动态、更具吸引力的网站文本打字机效果。

打字机效果模拟文本逐字显示，如同在您眼前实时打字一般。

How to Create a CSS Typewriter Effect for Your Website

在文本片段中添加打字机效果有助于吸引网站访问者，并保持他们继续阅读的兴趣。打字机效果可用于多种用途，例如制作引人入胜的登录页面、号召性用语元素、个人网站和代码演示。

轻松创建打字机效果

创建打字机效果非常简单，您只需要具备CSS和CSS动画的基础知识即可理解本教程。

打字机效果的工作原理如下：

打字机动画将通过使用CSS steps()函数逐步将文本元素的宽度从0%更改为100%，从而显示我们的文本元素。
闪烁动画将模拟“打出”文本的光标。

创建打字机效果网页

首先，让我们为打字机演示创建一个网页。它将包含一个用于打字机文本的<div>容器，其类名为<code>typed-out：

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developer</div>
    </div>
  </body>
</html>

为打字机文本容器设置样式

现在我们有了网页的布局，让我们为具有“typed-out”类的<div>设置样式： <pre class='brush:php;toolbar:false;'>.typed-out { overflow: hidden; border-right: .15em solid orange; font-size: 1.6rem; width: 0; }</pre> <p>请注意，为了使打字机效果生效，我们添加了以下内容：</p> <ul> <li> <code>"overflow: hidden;" 和 "width: 0;"，确保在打字效果开始之前不会显示文本内容。

"border-right: .15em solid orange;"，创建打字机光标。

在制作打字效果之前，为了在完全打出typed-out元素的最后一个字母后停止光标（就像打字机或文字处理器一样），我们将为typed-out元素创建一个容器并添加display: inline-block;：

.container {
  display: inline-block;
}

制作显示文本动画

打字机动画将创建typed-out元素内的文本逐字显示的效果。我们将使用@keyframes CSS动画规则：

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developer</div>
    </div>
  </body>
</html>

如您所见，此动画所做的只是将元素的宽度从0%更改为100%。

现在，我们将此动画包含在我们的typed-out类中，并将它的动画方向设置为forwards，以确保动画结束后文本元素不会返回到width: 0：

.typed-out {
  overflow: hidden;
  border-right: .15em solid orange;
  font-size: 1.6rem;
  width: 0;
}

我们的文本元素将以一种平滑的方式从左到右显示：

添加步骤以实现打字机效果

到目前为止，我们的文本已显示，但它是一种平滑的方式，不会逐字显示文本。这是一个开始，但显然它不像打字机效果那样。

为了使此动画逐字或逐步显示我们的文本元素（就像打字机一样），我们需要将typed-out类包含的打字动画分成几步，以便使其看起来像是在打出一样。这就是CSS steps()函数发挥作用的地方：

.container {
  display: inline-block;
}

如您所见，我们使用CSS steps()函数将打字动画分成20个步骤。

调整步骤以获得更长的打字效果

要调整较长的文本，您需要增加打字动画的步骤和持续时间。

调整步骤以获得更短的打字效果

要调整较短的文本，您需要减少打字动画的步骤和持续时间。

制作和设置闪烁光标动画

显然，最初的机械打字机没有闪烁的光标，但将其添加进去以模仿更现代的计算机/文字处理器的闪烁光标效果已成为传统。闪烁的光标动画有助于使打出的文本更能从静态文本元素中脱颖而出。

要向我们的打字机动画添加闪烁的光标动画，我们将首先创建闪烁动画：

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

在我们的网页中，此动画将把typed-out元素边框（用作打字机效果的光标）的边框颜色从透明更改为橙色。

我们将此动画包含在typed-out类的规则中，并将它的动画方向属性设置为infinite，以使光标每0.8秒无限期地消失和重新出现：

.typed-out{
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    font-size: 1.6rem;
    width: 0;
    animation: typing 1s forwards;
}

调整闪烁打字效果的代码

我们可以通过调整其border-right: .15em solid orange;属性来使光标更细或更粗，或者您可以使光标颜色不同，赋予它border-radius，调整其闪烁频率等等。

组合打字机文本动画的元素

现在您已经知道如何在CSS中制作打字机效果，是时候演示此打字效果的一些实用且相关的用例了。

结论

在本文中，我们了解了使用CSS创建动画“打字机”文本是多么容易。这种打字效果绝对可以为您的网页增添趣味和乐趣。

不过，也许值得最后温和地警告一下。此技术最好用于少量非关键文本，只是为了增加一点额外的乐趣。但请注意不要过度依赖它，因为像这样使用CSS动画有一些局限性。请确保在各种设备和视口大小上测试您的打字机文本，因为结果可能因平台而异。还要考虑一下依赖辅助技术的最终用户，理想情况下，可以进行一些可用性测试，以确保您不会给用户带来不便。因为您可以使用纯CSS来做一些事情并不一定意味着您应该这样做。如果打字机效果对您很重要，并且您想将其用于更关键的内容，也许至少也要考虑一下JavaScript解决方案。

无论如何，我希望您喜欢这篇文章，并且它让您开始思考您可以使用CSS动画做些什么其他很酷的事情，以增加您的网页的趣味和乐趣。

关于创建CSS打字机效果的常见问题

最后，让我们回答一些关于如何在CSS中创建打字机效果的最常见问题。

什么是打字机效果？

“打字机效果”是一种动画技术，它使一串文本逐字出现在屏幕上，就像它正在由打字机实时打出一样。此效果通常借助JavaScript创建，但也可以仅使用CSS实现，如本文所示。

什么是打字机动画？

打字机一次打印一个字母的文本。打字机动画是一种模仿打字机打字的动画，一次呈现一个字母的文字。它是许多网页上流行的动画效果。

如何在CSS中制作动画文本打字？

现代CSS提供了各种创建动画的工具，包括animation、@keyframes、steps()。这些工具用于逐渐显示首先通过overflow属性隐藏的文本。

如何使用CSS制作可自定义的打字机动画？

使用CSS创建可自定义的打字机动画涉及使用关键帧和CSS属性来控制文本在屏幕上打字时的外观和行为。您可以通过将一些动画参数公开为CSS变量（自定义属性）来使其可自定义，以便您可以轻松地在样式表中更改它们。例如：

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developer</div>
    </div>
  </body>
</html>

在此CSS代码中，我们定义了自定义属性（--typewriter-text和--typewriter-duration）以使动画可自定义。您可以通过修改这些属性来更改默认值。

如何在完全打出typed-out元素的最后一个字母后停止光标？

要在CSS打字机动画中停止typed-out元素的最后一个字母的光标，您可以使用CSS动画和animation-fill-mode属性：

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developer</div>
    </div>
  </body>
</html>

在上面的CSS中，打字机动画逐渐增加.typewriter容器内元素的宽度，有效地打出文本。animation-fill-mode属性设置为forwards以确保动画在完成之后保持最终状态（完全打出）。通过此设置，光标将在完全打出typed-out元素的最后一个字母后在其处闪烁。