成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css 打字動畫

tomlingtm / 3398人閱讀

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

實現(xiàn)思路
控制文字寬度

html

loading
文字出現(xiàn)效果

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

.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;
}
打字效果

平滑的動畫，不能夠顯示出打字效果，并且也沒有一個一個字的出現(xiàn)效果,這時候可以考慮一個寬度單位 ch。ch是數(shù)字"0"的寬度。只要我們保持所有字母寬度等寬,就可以用ch來代表所有文字寬度。

一般字母都是不等寬的。如下
iiiiiii
MMMMMMM

為了等寬，我們可以設(shè)置一下font-family屬性找到等寬文字。以下三個都可以

Consolas, Monaco, monospace

這時候可以使用steps函數(shù),具體可自行查閱。實現(xiàn)文字一個一個的出現(xiàn)

.loading-text {
    ...
    font-family: Consolas, Monaco, monospace;
    width: 10ch;
    animation: loading-text-typing 3s steps(10),
}
光標(biāo)效果

光標(biāo)就相當(dāng)于另一個動畫，一閃一閃，是顏色的切換動畫

.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是等寬間距，有多少字定義多少就好。我多定義了一個寬度，因為我是連續(xù)動畫的原因，動畫不連續(xù)就不用多1。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113112.html

相關(guān)文章

  • 用JS和CSS3實現(xiàn)打字動畫

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

    lentoo 評論0 收藏0

  • 用JS和CSS3實現(xiàn)打字動畫

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

    ernest.wang 評論0 收藏0

  • vue.js實現(xiàn)一個會動的簡歷(包含底部導(dǎo)航功能，編輯功能,添加了用戶自定義寫字速度功能)

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

    luffyZh 評論0 收藏0

  • vue.js實現(xiàn)一個會動的簡歷(包含底部導(dǎo)航功能，編輯功能,添加了用戶自定義寫字速度功能)

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

    daydream 評論0 收藏0

  • vue.js實現(xiàn)一個會動的簡歷(包含底部導(dǎo)航功能，編輯功能,添加了用戶自定義寫字速度功能)

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

    FleyX 評論0 收藏0

發(fā)表評論

0條評論

tomlingtm

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<