如何為您的網站創建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>設置樣式：

.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動畫規則：

<!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元素的最後一個字母后在其處閃爍。