純CSS打字動(dòng)畫的實(shí)現(xiàn)示例
我要評(píng)論在一些技術(shù)網(wǎng)站中，經(jīng)常會(huì)看到這樣一種展示效果：逐個(gè)顯示一段文本中的字符，模擬出一種打字的效果。通過這種方式可以顯著地提升網(wǎng)頁設(shè)計(jì)感。
在大部分應(yīng)用中，都是通過使用 JS 腳本實(shí)現(xiàn)該方案，雖然效果很好，但是對(duì)于使用 JS 來操作出表現(xiàn)層的展示，總感覺有點(diǎn)奇怪，所以嘗試下只使用 CSS 來實(shí)現(xiàn)我們的打字動(dòng)畫~
通過CSS，無法實(shí)現(xiàn)像 JS 那樣一個(gè)字一個(gè)字的繪制在頁面上，那不如就換一個(gè)思路，讓容器寬度成為動(dòng)畫的主體，讓文字逐漸顯示出來。具體來說，最開始容器的寬度是0，隨著動(dòng)畫的推進(jìn)，一個(gè)字一個(gè)字的擴(kuò)張到它應(yīng)用的寬度。（需要注意，該方案僅適用于單行文本）
按照我們預(yù)想的思路，很容易完成下述代碼。
@keyframes typing {
from {
width: 0;
}
}
h1 {
width: 188px;
animation: typing 8s;
white-space: nowrap;
overflow: hidden;
}
但是從實(shí)現(xiàn)效果上看，并不是那么理想，我們需要的動(dòng)畫效果是逐字呈現(xiàn)而不是這樣的平滑顯示。
對(duì)于這個(gè)問題，很顯然，我們會(huì)想到使用 steps() 來修復(fù)，但是具體需要分多少步又是擺在我們面前的另一個(gè)難題。
要解決這個(gè)問題，就需要說到 ch 這個(gè) CSS 中基本用不到的長度單位，它代表元素所用字體中“0”這一字形的寬度，如果使用的是等寬字體的話，那么“0”字形的寬度和其他所有字形的寬度是一樣的，所以很容易想到要解決上述問題，其實(shí)只要：
- 將元素文字設(shè)置為等寬字體（實(shí)際上，應(yīng)用打字動(dòng)效的文字都場景大多是為展示代碼的形式，大部分情況下也都是使用都等寬字體）
- 元素的
width設(shè)置為該元素中文字的個(gè)數(shù) - 同樣，將
animation的steps()也設(shè)置為元素的個(gè)數(shù)
@keyframes typing {
from {
width: 0;
}
}
h1 {
font-family: "Cascadia Code", Menlo, Monaco, "Courier New", monospace;
width: 12ch;
animation: typing 8s steps(12);
white-space: nowrap;
overflow: hidden;
}
已經(jīng)基本實(shí)現(xiàn)我們想要的效果了，最后只要加上一個(gè)閃爍的光標(biāo)即可?？梢酝ㄟ^使用偽元素生成光標(biāo)，并通過 opacity 屬性來實(shí)現(xiàn)閃爍效果：
@keyframes caret {
50% {
opacity: 0;
}
}
h1::after {
content: "";
position: absolute;
right: 0;
width: 2px;
top: 6px;
bottom: 6px;
background: #000;
animation: caret 1s steps(1) infinite;
}
到此這篇關(guān)于純CSS打字動(dòng)畫的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)CSS打字動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng)，可以同時(shí)控制行和列，相比 Flex（一維布局），更適合用在整體頁面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個(gè)非?；A(chǔ)且重要的屬性，它們用于控制元素周圍的空白區(qū)域，本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實(shí)際項(xiàng)目中使用它們2025-04-07- will-change 是一個(gè) CSS 屬性，用于告訴瀏覽器某個(gè)元素在未來可能會(huì)發(fā)生哪些變化，本文給大家介紹CSS will-change 屬性詳解，感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中，去除a標(biāo)簽（超鏈接）的下劃線的幾種方法，本文給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2025-04-07
在前端開發(fā)中，CSS（層疊樣式表）不僅是用來控制網(wǎng)頁的外觀和布局，更是實(shí)現(xiàn)復(fù)雜交互和動(dòng)態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展，CSS的用法也日益豐富和高級(jí),本文將2025-04-07css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場景、常見問題及解決方案，感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會(huì)失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性（如relative、absolute、fixed或sticky），本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標(biāo)懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實(shí)現(xiàn)了提示內(nèi)容的隱藏和顯示，感興趣的朋友一起2025-03-10
前端 CSS 動(dòng)態(tài)設(shè)置樣式：:class、:style 等技巧(推薦)
本文介紹了Vue.js中動(dòng)態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法：對(duì)象語法和數(shù)組語法,通過對(duì)象語法,可以根據(jù)條件動(dòng)態(tài)切換類名或樣式；通過數(shù)組語法,可以同時(shí)綁定多個(gè)類名或樣式,此外2025-02-26
