制作显示文本动画打字机动画将创建一个效果(组图)

2022-09-07

添加样式：

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

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

为了在生成输入效果之前将光标停止在类型元素的最后一个字母，就像打字机一样，我们将为类型元素创建一个容器并添加 display: inline-block;:

.container {
  display: inline-block;
}

动画显示文本

打字机动画将创建一个字母一个字母地打印出输入元素中的文本的效果。我们将使用@keyframes CSS 动画来实现这个效果：

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

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

我们现在将这个动画包含在我们的打字类中氛围，并将其动画方向设置为向前，以确保文本元素不会返回宽度：0：

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

我们的文本元素将简单地从左到右平滑显示：

在这里插入图片描述

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

到目前为止，我们的文本已经被揭示出来打字声音特效下载，但是以一种流畅的方式，而不是一个字母一个字母。这是一个开始打字声音特效下载，但显然不是打字机效果。

为了让这个动画逐个字母地显示我们的文本元素，或者像打字机一样分步显示，我们需要将 typed-out 类中包含的打字动画拆分为多个步骤，使其看起来像打字一样。这就是 CSS 函数 steps() 的作用：

.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() 函数将打字动画分为 20 个步骤。这就是我们现在看到的：

在这里插入图片描述

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

<html>
  <head>
    <title>Typewriter effecttitle>
  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 ah1>
<div class="container">
  <div class="typed-out">Web Developerdiv>
div>
body>
html>

你可以通过调整动画中的时间和steps函数的第一个参数来获得更好的效果。

创建闪烁光标动画并设置样式

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

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

@keyframes blink {
  from { border-color: transparent }
  to { border-color: orange; }
}

此动画会将输入元素的边框颜色（用作打字机效果的光标）从透明更改为橙色。

我们会将这个动画包含在类型输出类的规则中，并将其动画方向属性设置为无限，以使光标消失，然后每隔 0.8 秒重新出现一次：

.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,
      blink .8s infinite;
}

在这里插入图片描述

调整闪烁打字效果的代码

我们可以通过调整光标右边框使光标变细或变粗：0.15 em solid orange;属性，或者我们可以让光标变成不同的颜色，给它一个边框半径，调整它的闪烁效果频率等等。

总结

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

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

无论如何，我希望你喜欢这篇文章，并希望它能让你思考可以用 CSS 动画做的其他有趣的事情，从而为你的网页增添趣味和乐趣。

分享举报