用純 CSS 實作文本打字機效果，一定很酷！

在本文中，你将學習如何使用純CSS實作打字機效果，使網站的文本更加動态和迷人。

打字機的效果是文字逐漸顯露出來，就好像是在你眼前打字一樣。在你的文本中添加打字機的效果可以幫助吸引你網站的通路者，并保持他們進一步閱讀的興趣。打字機效果可以用于許多目的，例如制作引人入勝的登入頁面、智語、代碼示範。

打字機效果很容易建立

打字機效果很容易制作，要了解本文，你需要掌握

CSS和CSS動畫

的基本知識。

首先我們來解釋一下打字機效果的實作方式:

打字機動畫将通過使用 CSS steps() 函數一步一步地将文本元素的寬度從0更改為100%，進而顯示文本元素。
一個閃爍動畫将使光标動起來。

開始

讓我們首先為我們的打字機效果建立web頁面。它将為我們的打字機文本包含一個

<div>

容器:

<!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>

複制

為打字機文本的容器設定樣式

現在我們已經有了網頁的布局，讓我們用

" typeout "類

為

<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;" ，用來建立打字機的光标。

在産生輸入效果之前，為了在輸入完的元素的最後一個字母處停止光标，就像打字機所做的那樣，我們将為輸入的元素建立一個容器，并添加

display: inline-block;

.container {
  display: inline-block;
}

複制

制作顯示文本動畫

打字機動畫将建立一個效果，一個字母一個字母地列印出輸入元素中的文本。我們将使用

@keyframes CSS動畫

實作這個效果:

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

複制

正如所看到的，所有這些動畫所做的隻是将元素的寬度從0更改為100%。

現在，我們将在我們的鍵入類中包括這個動畫，并設定其動畫方向為

forward

，以確定文本元素在動畫完成後不會傳回width: 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

類包含的

typing

動畫拆分為步驟，以便它看起來像是被鍵入的。這就是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()

函數将

typing

動畫分為

個步驟。這是我們現在看到的:

這是我們目前為止的完整代碼:

<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>

複制

你可以通過調整

animation

中的時間和

steps

函數的第一個參數來達到較好的效果。

制作和樣式閃爍光标動畫

很明顯，最初的打字機沒有閃爍光标，但增加一個來模仿現代電腦/文字處理器閃爍光标的效果已經成為一種傳統。閃爍的光标動畫有助于使列印出來的文本從靜态文本元素中脫穎而出。

要添加一個閃爍光标動畫到我們的打字機動畫，我們首先建立閃爍動畫:

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

複制

這個動畫将改變輸入元素的邊框顔色——它被用作打字機效果的光标——從透明變為橙色。

我們将在

typed-out

類的規則中包含這個動畫，并将其動畫方向屬性設定為

infinite

，使光标每隔

0.8秒

消失一次，然後再次出現:

複制

調整閃爍打字效果的代碼

我們可以通過調整光标的右邊框使光标變薄或變厚:

0.15 em solid orange;

屬性，或者可以使光标為不同的顔色，給它一個邊界半徑，調整其閃爍效果的頻率，等等。

總結

在本文中，我們已經看到使用CSS建立動畫“打字機”文本是多麼容易。這種打字效果絕對可以為你的網頁增添樂趣。

不過，或許以溫和的警告作為結束是值得的。這個技巧最适合用于小部分的非關鍵文本，隻是為了創造一點額外的樂趣。但是要注意不要過于依賴它，因為使用CSS動畫有一些限制。請確定在一系列裝置和視口大小上測試您的打字機文本，因為結果可能因平台而異。還要為依賴輔助技術的最終使用者着想，最好運作一些可用性測試，以確定您沒有讓使用者的生活變得困難。因為你可以用純CSS做一些事情，并不一定意味着你應該這樣做。如果打字機效果對您很重要，并且希望将其用于更關鍵的内容，那麼至少也應該考慮JavaScript解決方案。

無論如何，我希望你喜歡這篇文章，并希望它能讓你思考使用CSS動畫可以做的其他有趣的事情，進而為你的web頁面添加興趣和樂趣。