純CSS打字動(dòng)畫(huà)的實(shí)現(xiàn)示例

發(fā)布時(shí)間：2022-07-25 16:34:41 作者：月亮與六便士丶

本文主要介紹了純CSS打字動(dòng)畫(huà)的實(shí)現(xiàn)示例，逐個(gè)顯示一段文本中的字符，模擬出一種打字的效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

在一些技術(shù)網(wǎng)站中，經(jīng)常會(huì)看到這樣一種展示效果：逐個(gè)顯示一段文本中的字符，模擬出一種打字的效果。通過(guò)這種方式可以顯著地提升網(wǎng)頁(yè)設(shè)計(jì)感。

在大部分應(yīng)用中，都是通過(guò)使用 JS 腳本實(shí)現(xiàn)該方案，雖然效果很好，但是對(duì)于使用 JS 來(lái)操作出表現(xiàn)層的展示，總感覺(jué)有點(diǎn)奇怪，所以嘗試下只使用 CSS 來(lái)實(shí)現(xiàn)我們的打字動(dòng)畫(huà)~

通過(guò)CSS，無(wú)法實(shí)現(xiàn)像 JS 那樣一個(gè)字一個(gè)字的繪制在頁(yè)面上，那不如就換一個(gè)思路，讓容器寬度成為動(dòng)畫(huà)的主體，讓文字逐漸顯示出來(lái)。具體來(lái)說(shuō)，最開(kāi)始容器的寬度是0，隨著動(dòng)畫(huà)的推進(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)畫(huà)效果是逐字呈現(xiàn)而不是這樣的平滑顯示。

對(duì)于這個(gè)問(wèn)題，很顯然，我們會(huì)想到使用 steps() 來(lái)修復(fù)，但是具體需要分多少步又是擺在我們面前的另一個(gè)難題。

要解決這個(gè)問(wèn)題，就需要說(shuō)到 ch 這個(gè) CSS 中基本用不到的長(zhǎng)度單位，它代表元素所用字體中“0”這一字形的寬度，如果使用的是等寬字體的話，那么“0”字形的寬度和其他所有字形的寬度是一樣的，所以很容易想到要解決上述問(wèn)題，其實(shí)只要：

將元素文字設(shè)置為等寬字體（實(shí)際上，應(yīng)用打字動(dòng)效的文字都場(chǎ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)即可。可以通過(guò)使用偽元素生成光標(biāo)，并通過(guò) opacity 屬性來(lái)實(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)畫(huà)的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)CSS打字動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！