likes
comments
collection
share

使用CSS 为网站创建 打字机效果

作者站长头像
站长
· 阅读数 73
  • 动画
  • CSS

在本文中，您将学习如何使用纯 CSS 中的打字机效果使您的网站的文本动态且更具吸引力。

打字机效果包括逐渐显示的文本，就好像它是在你眼前打字一样。 将打字机效果添加到您的文本块可以帮助吸引您网站的访问者并让他们有兴趣进一步阅读。打字机效果可用于多种用途，例如制作引人入胜的登录页面、号召性用语元素、个人网站和代码演示

打字机效果很容易创造

打字机效果很容易制作，为了理解本教程，您只需要 CSS 和 CSS 动画的基本知识。

这是打字机效果的工作方式：

  • steps()打字机动画将通过使用 CSS函数逐步将其宽度从 0 更改为 100% 来显示我们的文本元素。
  • 闪烁动画将为“键入”文本的光标设置动画。

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

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

    <div class="container">
      <div class="typed-out">此情可待成追忆，只是当时已惘然。</div>
    </div>

 body{
        background: navajowhite;
        background-size: cover;
      }

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

现在我们有了网页的布局，让我们<div>用“typed-out”类来设置样式：

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

请注意，为了使打字机效果起作用，我们添加了以下内容：

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

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

.container {
  display: inline-block;
}

制作显示文本动画

打字机动画将创建typed-out元素内部文本的效果，逐个字母地输入。我们将使用@keyframesCSS 动画规则：

@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;
}

我们的文本元素将在一个平滑的步骤中简单地显示，从左到右：

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

到目前为止，我们的文本被显示出来了，但是以一种平滑的方式，不会一个字母一个字母地显示文本。这是一个开始，但显然它不是打字机效果的样子。

为了让这个动画一个字母一个字母地显示我们的文本元素，或者像打字机那样在步骤中显示我们的文本元素，我们需要将类中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;
}

如您所见，我们使用 CSS函数将typing动画分为 20 个步骤。steps()这是我们现在看到的：

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

<html>

<head>
    <title>如何为网站创建 CSS 打字机效果</title>
</head>
<style>
    body {
        background: navajowhite;
        background-size: cover;
    }

    .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>
    <div class="container">
        <div class="typed-out">此情可待成追忆，只是当时已惘然。</div>
    </div>
</body>

</html>

结论

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

不过，也许值得以温和的警告结束。这种技术最适合用于小部分非关键文本，只是为了创造一点额外的乐趣。但请注意不要过度依赖它，因为像这样使用 CSS 动画有一些限制。确保在一系列设备和视口大小上测试您的打字机文本，因为结果可能因平台而异。还要考虑一下依赖辅助技术的最终用户，并在理想情况下运行一些可用性测试，以确保您不会让用户的生活变得困难。因为你可以用纯 CSS 做一些事情并不一定意味着你应该做。如果打字机效果对您很重要，并且您想将它用于更关键的内容，那么至少也可以考虑使用 JavaScript 解决方案。

不管怎样，我希望你喜欢这篇文章，它让你思考可以用 CSS 动画做的其他很酷的事情，为你的网页增添趣味和乐趣。

转载自:https://juejin.cn/post/7151967521090830373
评论
请登录