成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

css 打字動(dòng)畫

tomlingtm / 3460人閱讀

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

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

html

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

首先，第一步我們先做成一個(gè)動(dòng)畫。

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

在上述樣式以后，并沒有什么效果。因?yàn)檫€沒有處理文字,通過禁止換行 white-space 和超出部分隱藏 overflow,你至少可以得到一段平滑的文字顯示動(dòng)畫。

.loading-text {
    ...
    white-space: nowrap;
    overflow: hidden;
}
打字效果

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

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

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

Consolas, Monaco, monospace

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

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

光標(biāo)就相當(dāng)于另一個(gè)動(dòng)畫，一閃一閃，是顏色的切換動(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是等寬間距，有多少字定義多少就好。我多定義了一個(gè)寬度，因?yàn)槲沂沁B續(xù)動(dòng)畫的原因，動(dòng)畫不連續(xù)就不用多1。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/113112.html

相關(guān)文章

  • 用JS和CSS3實(shí)現(xiàn)打字動(dòng)畫

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

    lentoo 評(píng)論0 收藏0

  • 用JS和CSS3實(shí)現(xiàn)打字動(dòng)畫

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

    ernest.wang 評(píng)論0 收藏0

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

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

    luffyZh 評(píng)論0 收藏0

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

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

    daydream 評(píng)論0 收藏0

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

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

    FleyX 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<