欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用CSS實(shí)現(xiàn)打字機(jī)效果

  發(fā)布時(shí)間：2023-10-23 14:07:56   作者：OXXD   我要評(píng)論
實(shí)現(xiàn)打字機(jī)效果的關(guān)鍵是兩個(gè)動(dòng)畫效果，文字出現(xiàn)的動(dòng)畫，和光標(biāo)閃爍出現(xiàn)的動(dòng)畫,本文小編給大家介紹了如何使用CSS實(shí)現(xiàn)打字機(jī)效果，文章通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下

實(shí)現(xiàn)效果

在線演示

實(shí)現(xiàn)

HTML 元素：

<div class="typewriter">
  <h1 class="typing">The cat and the hat.</h1>
</div>

實(shí)現(xiàn)打字機(jī)效果的關(guān)鍵是兩個(gè)動(dòng)畫效果，文字出現(xiàn)的動(dòng)畫，和光標(biāo)閃爍出現(xiàn)的動(dòng)畫。

這兩個(gè)動(dòng)畫的實(shí)現(xiàn)方式也很簡(jiǎn)單，文字出現(xiàn)的打字機(jī)動(dòng)畫只通過(guò)控制元素長(zhǎng)度即可。光標(biāo)閃爍出現(xiàn)可以通過(guò)添加右邊框，并且給邊框添加顏色動(dòng)畫實(shí)現(xiàn)。

/* 打字機(jī)動(dòng)畫 */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
/* 光標(biāo)動(dòng)畫 */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

然后將動(dòng)畫效果添加到指定的元素上即可。

.typewriter .typing {
  color: #fff;
  font-family: monospace;
  overflow: hidden; /* 保證文字在動(dòng)畫之前隱藏 */
  border-right: .15em solid orange; /* 使用邊框?qū)崿F(xiàn)光標(biāo) */
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  animation:  /** 動(dòng)畫效果 */
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

結(jié)合 Javascript 來(lái)控制樣式類顯示隱藏時(shí)機(jī)，可以輕松為不同文本實(shí)現(xiàn)打字機(jī)效果。

到此這篇關(guān)于使用CSS實(shí)現(xiàn)打字機(jī)效果的文章就介紹到這了,更多相關(guān)CSS打字機(jī)效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • 巧用CSS實(shí)現(xiàn)文字間距自適應(yīng)寬度

    項(xiàng)目需要開(kāi)發(fā)一個(gè)仿醫(yī)療證書類的一個(gè)小卡片，用于模擬展示不同種類的證書信息，證書標(biāo)題與左右并列的布局結(jié)構(gòu)較好解決，但是根據(jù)文本塊寬度，讓里面的內(nèi)容文字間距自適應(yīng)，
    2023-10-20

  • 使用CSS還原拉斯維加斯球數(shù)字動(dòng)畫效果

    最近大家刷抖音，是否有刷到拉斯維加斯的新地標(biāo) 「Sphere」，場(chǎng)館內(nèi)部的視覺(jué)效果非常驚人，我的第一想法就是，這個(gè)看起來(lái)用 CSS 也可以實(shí)現(xiàn)嘛？還有 CSS 不能實(shí)現(xiàn)的？本文
    2023-10-20

  • CSS中float用法詳解

    CSS中的float屬性是布局中經(jīng)常會(huì)用到的一個(gè)屬性，它可以讓元素浮動(dòng)到其他元素的左、右或中間位置，本文給大家介紹CSS中float用法，感興趣的朋友一起看看吧
    2023-10-18

  • 使用CSS實(shí)現(xiàn)文字漸變色效果

    要在文本中實(shí)現(xiàn)漸變色效果，我們可以使用CSS中的background-clip屬性和CSS漸變來(lái)實(shí)現(xiàn),本文給大家分享一個(gè)代碼示例，展示如何創(chuàng)建文本漸變色效果，感興趣的同學(xué)可以自己動(dòng)手
    2023-10-16

  • 使用CSS實(shí)現(xiàn)漸變圓角邊框的效果

    這篇文章給大家介紹了如何使用CSS實(shí)現(xiàn)漸變圓角邊框的效果，有沒(méi)有發(fā)現(xiàn)在現(xiàn)如今的網(wǎng)站應(yīng)用中，我們大量的使用到這類場(chǎng)景,在解決這類問(wèn)題時(shí)，我們利用了css的mask與mask-comp
    2023-10-12

  • 使用CSS實(shí)現(xiàn)一個(gè)簡(jiǎn)單的無(wú)限滾動(dòng)效果

    無(wú)限滾動(dòng)效果是一種常見(jiàn)的網(wǎng)頁(yè)交互方式，可以提供更好的用戶體驗(yàn),本文將介紹如何使用 CSS 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的無(wú)限滾動(dòng)效果，并提供詳細(xì)的代碼示例,,需要的朋友可以參考下
    2023-10-11

  • CSS實(shí)現(xiàn)音頻播放時(shí)柱狀波動(dòng)效果

    通過(guò)CSS的動(dòng)畫屬性animation可以實(shí)現(xiàn)音頻播放時(shí)的動(dòng)畫效果，同時(shí)配合JS操作動(dòng)畫的animation-play-state屬性，來(lái)控制動(dòng)畫的暫停和播放，本文重點(diǎn)介紹CSS實(shí)現(xiàn)音頻播放時(shí)柱狀
    2023-10-10

  • 關(guān)于css中的 background-attachment 屬性詳解

    這篇文章主要介紹了關(guān)于css中的 background-attachment 屬性詳解,在日常的使用中，還是background-attachment:fixed 使用的最多，因?yàn)檫@個(gè)屬性更多的時(shí)候是跟background-im
    2023-10-10

  • CSS點(diǎn)擊切換或隱藏盒子的卷起、展開(kāi)效果

    這篇文章主要介紹了CSS點(diǎn)擊切換或隱藏盒子的卷起、展開(kāi)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2023-10-08

  • CSS網(wǎng)站變灰的實(shí)現(xiàn)方法

    實(shí)現(xiàn)網(wǎng)站變灰通常是為了響應(yīng)某種特定事件或紀(jì)念日，例如悼念等,這可以通過(guò)在網(wǎng)站的最外層添加一個(gè)全局的 CSS 樣式來(lái)實(shí)現(xiàn),本文小編給大家介紹了幾種不同的實(shí)現(xiàn)方法，感興趣
    2023-10-08

最新評(píng)論