今天我們來學習一個有意思的多行文本輸入打字效果，像是這樣： 這個效果其實本身並非特別困難，實現的方式也很多，在本文中，我們更多的會聚焦於整個多行打字效果最後的動態游標的實現。 也就是如何在文本不斷變長，在不確定行數的情況下，讓文字的最末行右側處，一直有一個不斷閃爍的游標效果： 單行文本打字效果 在此 ...
今天我們來學習一個有意思的多行文本輸入打字效果，像是這樣：
這個效果其實本身並非特別困難，實現的方式也很多，在本文中，我們更多的會聚焦於整個多行打字效果最後的動態游標的實現。
也就是如何在文本不斷變長，在不確定行數的情況下，讓文字的最末行右側處，一直有一個不斷閃爍的游標效果：
單行文本打字效果
在此之前，我們快速看一個之前在 【Web動畫】科技感十足的暗黑字元雨動畫 分享過的，非常簡單的單行打字效果動畫。
在這裡的單行打字效果，其核心就是就是讓字元一個一個的出現，像是這樣：
這裡藉助了 animation 的 steps 的特性實現，也就是逐幀動畫。
從左向右和從上向下原理是一樣的，以從左向右為例，假設我們有 26 個英文字元，我們已知 26 個英文字元組成的字元串的長度，那麼我們只需要設定一個動畫，讓它的寬度變化從 0 - 100% 經歷 26 幀即可，配合 overflow: hidden，steps 的每一幀即可展出一個字元。
當然，這裡需要利用一些小技巧，我們如何通過字元的數量知道字元串的長度呢？
劃重點：通過等寬字體的特性，配合 CSS 中的 ch 單位。
如果不瞭解什麼是等寬字體族，可以看看我的這篇文章 -- 《你該知道的字體 font-family》。
CSS 中，ch 單位表示數字 “0” 的寬度。如果字體恰巧又是等寬字體，即每個字元的寬度是一樣的，此時 ch 就能變成每個英文字元的寬度，那麼 26ch 其實也就是整個字元串的長度。
利用這個特性，配合 animation 的 steps，我們可以輕鬆的利用 CSS 實現打字動畫效果：
<h1>Pure CSS Typing animation.</h1>
h1 {
font-family: monospace;
width: 26ch;
white-space: nowrap;
overflow: hidden;
animation: typing 3s steps(26, end);
}
@keyframes typing {
0{
width: 0;
}
100% {
width: 26ch;
}
}
就可以得到如下結果啦：
完整的代碼你可以戳這裡：
CodePen Demo -- 純 CSS 實現文字輸入效果
上述單行文本打字效果局限
當然，上述效果一開始已經寫死了最終的文本。這一塊，我們實際中可能是通過 Javascript 不斷的賦值新內容。
不過，即便去除掉文本內容生成的方式這個因素，上述看似美好的動畫效果，還有幾個弊端。
- 限制了等寬字體，這其實就是非常大的一個問題，正常的頁面，其實用的肯定都不是等寬字體，常見的襯線與非襯線字體，都不是等寬字體。
- 限制了單行文本，實際效果，類似於 GPT 吐答案這種，單行內容肯定是無法滿足的，我們需要有一種游標效果能適配多行文本的方式。
巧用 background 實現多行游標效果
好，那接下來，我們嘗試換一種思路實現一個適配單行和多行的文本打字效果。
首先，我們將文本內容的生成，替換成使用 Javascript 生成：
<p id="content"></p>
const text = 'Lorem ipsum dolor sit amet consectetur adipisicing elit......';
const contentElement = document.getElementById('content');
let index = 0;
function addNextCharacter() {
if (index < text.length) {
contentElement.textContent += text[index];
index++;
setTimeout(addNextCharacter, Math.random() * 150 + 30);
}
}
addNextCharacter();
效果如下：
接下來，我們核心需要實現的就是任意行數下動態游標的效果。
也就是最開始的這個效果，文字最後的游標效果：
讀到這裡，暫停 10 秒，思考一下如果讓你來實現，會用什麼方式實現？能用什麼方式實現？有沒有低成本快速能實現的奇技淫巧？
這裡，我們可以使用行內元素的 background 漸變實現。
複習一下，之前我們講過很多次是 background 在display: inline 和 display: block 下的不同表現。
其核心現象就是 display: inline 內聯元素的 background 展現形式與 display: block 塊級元素（或者 inline-block、flex、grid）不一致。
簡單看個例子：
<p>Lorem .....</p>
<a>Lorem .....</a>
這裡需要註意，<p> 元素是塊級元素，而 <a> 是內聯元素。
我們給它們統一添加上一個從綠色到藍色的漸變背景色：
p, a {
background: linear-gradient(90deg, blue, green);
}
看看效果：
什麼意思呢？區別很明顯，塊級元素的背景整體是一個漸變整體，而內聯元素的每一行都是會有不一樣的效果，整體連起來串聯成一個整體。
基於上述的 Demo，我們可以給它們添加一個 background-size 的動畫。像是這樣：
<p>Lorem .....</p>
<a>Lorem .....</a>
p, a {
color: #000;
background: linear-gradient(90deg, blue, green);
background-size: 100% 100%;
background-repeat: no-repeat;
transition: all 1s linear;
}
p:hover ,
a:hover {
background-size: 0 100%;
}
效果如下：
就可以得到這樣不同的動畫，可以看到，在 display: inline 的 <a> 標簽下，動畫效果是以行為單位進行變換的。
針對這個特性，我們將我們的文本容器，改為 display: inline，然後給他設置一個特殊的背景，前 100% - 2px 寬度為一個顏色，最後 2px 為一個顏色。
我們繼續改造一下我們上述的 DEMO：
<p id="content"></p>
p {
display: inline;
background: linear-gradient(90deg, #fc0, #fc0 calc(100% - 2px), #f00 calc(100% - 2px), #f00);
}
其中核心的背景代碼 background: linear-gradient(90deg, #fc0, #fc0 calc(100% - 2px), #f00 calc(100% - 2px), #f00) 表達的含義就是前 100% - 2px 寬度為橙色，最後 2px 為紅色。
看看，此時整個的效果：
好好理解一下：
基於上述這個效果：
- 我們只需要把前
100% - 2px寬度的橙色，設置為透明 - 最後 2px 的紅色，設置成
#000黑色到transparent透明的動態變化
完整的 CSS 代碼如下：
:root {
--pointerColor: #000;
}
p {
display: inline;
background: linear-gradient(90deg, transparent, transparent calc(100% - 2px), var(--pointerColor) calc(100% - 2px), var(--pointerColor));
animation: colorChange .8s linear infinite;
padding-right: 4px;
}
@keyframes colorChange {
0%, 50% {
--pointerColor: #000;
}
50%, 100% {
--pointerColor: transparent;
}
}
如此一來，我們就成功的實現了任意行數下動態游標的效果。得到了最初的完整效果：
整個 DEMO 的完整代碼，你可以戳這裡瞭解：CodePen Demo -- 多行打字效果
整個方案的核心，在於理解如何利用內聯元素的 background，巧妙的實現動態游標效果，需要好好理解其中的奧妙。
當然，實現這個動態游標的方式還有很多，譬如，我們只需要用一個寬度為 2px 的 <span> 元素，插入到元素的最尾部，實現 #000 黑色到 transparent 透明的動態變化。
只是文中這種方式，我認為是元素最少，且最為巧妙的方式。
最後
好了，本文到此結束，希望本文對你有所幫助
