css 打字動畫

實現思路
控制文字寬度

html

<span class="loading-text">loading</span>

文字出現效果

首先，第一步咱們先作成一個動畫。

.loading-text {
    width: 100px;
    animation: loading-text-typing 3s;
}
@keyframes loading-text-typing {
    from {
       width: 0;
    }
 }

在上述樣式之後，並無什麼效果。由於尚未處理文字,經過禁止換行 white-space 和超出部分隱藏 overflow,你至少能夠獲得一段平滑的文字顯示動畫。

.loading-text {
    ...
    white-space: nowrap;
    overflow: hidden;
}

打字效果

平滑的動畫，不可以顯示出打字效果，而且也沒有一個一個字的出現效果,這時候能夠考慮一個寬度單位 ch。ch是數字'0'的寬度。只要咱們保持全部字母寬度等寬,就能夠用ch來表明全部文字寬度。

通常字母都是不等寬的。以下
iiiiiii
MMMMMMM

爲了等寬，咱們能夠設置一下font-family屬性找到等寬文字。如下三個均可以

Consolas, Monaco, monospace

這時候可使用steps函數,具體可自行查閱。實現文字一個一個的出現

.loading-text {
    ...
    font-family: Consolas, Monaco, monospace;
    width: 10ch;
    animation: loading-text-typing 3s steps(10),
}

光標效果

光標就至關於另外一個動畫，一閃一閃，是顏色的切換動畫

.loading-text {
    animation: loading-text-caret 1s steps(1) infinite,
}
@keyframes loading-text-caret {
    50% {
       border-color: transparent;
    }
}

最終代碼

css

.loading-text {
    font-family: Consolas, Monaco, monospace;
    display: inline-block;
    color: #ED6A5A;
    font-weight: bold;
    width: 11ch;
    animation: loading-text-typing 3s steps(11) infinite,
               loading-text-caret 1s steps(1) infinite;
    white-space: nowrap;
    overflow: hidden;
    border-right: 1px solid;
}

@keyframes loading-text-typing {
    from {
       width: 0;
    }
 }

@keyframes loading-text-caret {
    50% {
       border-color: transparent;
    }
}

注意 width: 11ch; ch是等寬間距，有多少字定義多少就好。我多定義了一個寬度，由於我是連續動畫的緣由，動畫不連續就不用多1。