純CSS打字動畫的實現(xiàn)示例

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

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

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

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

通過CSS，無法實現(xiàn)像 JS 那樣一個字一個字的繪制在頁面上，那不如就換一個思路，讓容器寬度成為動畫的主體，讓文字逐漸顯示出來。具體來說，最開始容器的寬度是0，隨著動畫的推進(jìn)，一個字一個字的擴(kuò)張到它應(yīng)用的寬度。（需要注意，該方案僅適用于單行文本）

按照我們預(yù)想的思路，很容易完成下述代碼。

@keyframes typing {
    from {
        width: 0;
    }
}

h1 {
    width: 188px;
    animation: typing 8s;
    white-space: nowrap;
    overflow: hidden;
}

但是從實現(xiàn)效果上看，并不是那么理想，我們需要的動畫效果是逐字呈現(xiàn)而不是這樣的平滑顯示。

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

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

將元素文字設(shè)置為等寬字體（實際上，應(yīng)用打字動效的文字都場景大多是為展示代碼的形式，大部分情況下也都是使用都等寬字體）
元素的 width 設(shè)置為該元素中文字的個數(shù)
同樣，將 animation 的 steps() 也設(shè)置為元素的個數(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)基本實現(xiàn)我們想要的效果了，最后只要加上一個閃爍的光標(biāo)即可?？梢酝ㄟ^使用偽元素生成光標(biāo)，并通過 opacity 屬性來實現(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打字動畫的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)CSS打字動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！