如何为你的网站创建一个CSS打字机效果

热门技术勘探工
928 阅读3分钟

How to Create a CSS Typewriter Effect for your Website

在这篇文章中，你将学习如何使用纯CSS的打字机效果使你的网站的文本变得动态和更有吸引力。

打字机效果是指文本逐渐显现，就像在你眼前打字一样。

Typewriter animation of the words "Web Developer"

将打字机效果添加到大块的文本中，可以帮助吸引你的网站访问者，使他们有兴趣进一步阅读。打字机效果可用于多种用途，如制作有吸引力的登陆页面、号召性元素、个人网站和代码演示等。

打字机效果很容易创建

打字机效果很容易制作，你只需要具备CSS和CSS动画的基本知识，就可以理解本教程的内容。

下面是打字机效果的工作方式。

  • 打字机动画将通过使用CSSsteps() 函数，将我们的文本元素的宽度从0到100%一步一步地改变，从而显示出来。
  • 一个眨眼动画将使 "打出 "文字的光标产生动画效果。

为我们的打字效果创建网页

让我们首先为我们的打字机演示创建一个网页。它将包括一个<div> 容器，用于我们的打字机文本，类别为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>

为打字机文本的容器设计样式

现在我们有了网页的布局，让我们用 "打出 "类来设计<div> 。

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

请注意，为了使打字机的效果发挥作用，我们已经添加了以下内容。

  • "overflow: hidden;" 和一个 ，以确保文本内容在打字效果开始之前不会显示出来。"width: 0;"
  • "border-right: .15em solid orange;"，以创建打字机光标。

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

.container {
  display: inline-block;
}

制作揭开文本的动画

打字机动画将创造出typed-out 元素中的文字被逐个打出来的效果。我们将使用@keyframes CSS动画规则。

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

正如你所看到的，这个动画所做的只是将一个元素的宽度从0变为100%。

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

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

我们的文本元素将简单地以一个平滑的步骤显现出来，从左到右。

请看SitePoint(@SitePoint)在CodePen上发表的Pen
Smooth步骤
。

添加步骤以达到打字机的效果

到目前为止，我们的文字已经显现出来了，但是是以一种平滑的方式，并没有逐个字母的显现出来。这是一个开始，但显然这不是打字机效果的样子。

为了使这个动画能够像打字机那样逐个字母地显示我们的文本元素，或者说是分步显示，我们需要将typed-out 类所包含的typing 动画分成几步，以便让它看起来像正在打出的一样。这就是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;
}

正如你所看到的，我们使用CSS的steps() 函数将typing 动画分成了20个步骤。这就是我们现在看到的情况。

请看CodePen上SitePoint (@SitePoint) 的Pen
多个步骤
。

这是我们到目前为止的完整代码。

<html>
  <head>
    <title>Typewriter effect</title>
  </head>
  <style>
    body{
      background: navajowhite;
      background-size: cover;
      font-family: 'Trebuchet MS', sans-serif; 
    }
    .container{
      display: inline-block;
    }
    .typed-out{
      overflow: hidden;
      border-right: .15em solid orange;
      white-space: nowrap;
      animation: 
      typing 1s steps(20, end) forwards;
      font-size: 1.6rem;
      width: 0;
    }
    @keyframes typing {
      from { width: 0 }
      to { width: 100% }
    }
  </style>
<body>
<h1>I'm Matt, I'm a</h1>
<div class="container">
  <div class="typed-out">Web Developer</div>
</div>
</body>
</html>

继续阅读如何为你的网站创建一个CSS打字机效果在SitePoint上。

avatar
文章
阅读
粉丝