css 打字動畫

tomlingtm 發布于2019-08-29 15:07 / 3382人閱讀

摘要：實現思路控制文字寬度文字出現效果首先，第一步我們先做成一個動畫。打字效果平滑的動畫，不能夠顯示出打字效果，并且也沒有一個一個字的出現效果這時候可以考慮一個寬度單位。

實現思路
控制文字寬度

html

loading

文字出現效果

首先，第一步我們先做成一個動畫。

.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。

GPU云服務器云服務器 jquery打字動畫 css3動畫高性能css3動畫打字

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113112.html

用JS和CSS3實現打字動畫

摘要：我們經常希望一段文本中的字符逐個顯示，模擬出一種打字的效果。類似于終端命令行的感覺。我們經常希望一段文本中的字符逐個顯示，模擬出一種打字的效果。類似于終端命令行的感覺。最終效果用JS去實現： html： js代碼： const $ = attr => document.querySelector(attr); const textDom = $(.text); const cu...

lentoo 2019-08-01 17:17 評論0 收藏0
用JS和CSS3實現打字動畫

摘要：我們經常希望一段文本中的字符逐個顯示，模擬出一種打字的效果。類似于終端命令行的感覺。我們經常希望一段文本中的字符逐個顯示，模擬出一種打字的效果。類似于終端命令行的感覺。最終效果用JS去實現： html： js代碼： const $ = attr => document.querySelector(attr); const textDom = $(.text); const cu...

ernest.wang 2019-08-20 18:25 評論0 收藏0
vue.js實現一個會動的簡歷(包含底部導航功能，編輯功能,添加了用戶自定義寫字速度功能)

摘要：好了，讓我們來實現一個簡單的這樣打字的效果，如下你可以狠狠點擊此處具體示例查看效果。接下來分析如何暫停動畫和繼續動畫，很簡單，就是清除定時器，然后重新調用即可。如何讓編輯的代碼生效呢，這就需要用到自定義事件事件修飾符，自行查看官網。在網上看到一個這樣的網站，STRML它的效果看著十分有趣,如下圖所示:showImg(https://segmentfault.com/img/bVbqX...

luffyZh 2019-08-02 16:11 評論0 收藏0
vue.js實現一個會動的簡歷(包含底部導航功能，編輯功能,添加了用戶自定義寫字速度功能)

摘要：好了，讓我們來實現一個簡單的這樣打字的效果，如下你可以狠狠點擊此處具體示例查看效果。接下來分析如何暫停動畫和繼續動畫，很簡單，就是清除定時器，然后重新調用即可。如何讓編輯的代碼生效呢，這就需要用到自定義事件事件修飾符，自行查看官網。在網上看到一個這樣的網站，STRML它的效果看著十分有趣,如下圖所示:showImg(https://segmentfault.com/img/bVbqX...

daydream 2019-08-23 16:46 評論0 收藏0
vue.js實現一個會動的簡歷(包含底部導航功能，編輯功能,添加了用戶自定義寫字速度功能)

摘要：好了，讓我們來實現一個簡單的這樣打字的效果，如下你可以狠狠點擊此處具體示例查看效果。接下來分析如何暫停動畫和繼續動畫，很簡單，就是清除定時器，然后重新調用即可。如何讓編輯的代碼生效呢，這就需要用到自定義事件事件修飾符，自行查看官網。在網上看到一個這樣的網站，STRML它的效果看著十分有趣,如下圖所示:showImg(https://segmentfault.com/img/bVbqX...

FleyX 2019-08-29 18:32 評論0 收藏0