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

資訊專欄INFORMATION COLUMN

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

ernest.wang / 2511人閱讀

摘要：我們經(jīng)常希望一段文本中的字符逐個(gè)顯示，模擬出一種打字的效果。類似于終端命令行的感覺。

我們經(jīng)常希望一段文本中的字符逐個(gè)顯示，模擬出一種打字的效果。類似于終端命令行的感覺。最終效果

用JS去實(shí)現(xiàn)：

html：

js代碼：

const $ = attr => document.querySelector(attr);
const textDom = $(".text");
const cursorDom = $(".cursor");
const input = (text) => {
  const textArr = text.split("");
  let index = 0;
  const timer = setInterval(() => {
    const showText = textArr.slice(0, index).join("");
    textDom.innerHTML = showText;
    index++;
    if (index > textArr.length) clearInterval(timer);
  }, 100);
  setInterval(() => {
    if (cursorDom.style.display === "none") {
      cursorDom.style.display = "inline";
    } else {
      cursorDom.style.display = "none";
    }
  }, 500);
}
input("The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.");
用CSS3去實(shí)現(xiàn)：

JS實(shí)現(xiàn)給人的感覺又臭又長，那能不能用CSS去實(shí)現(xiàn)呢？
html：

The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.
@keyframes typing {
    from { width: 0 }
}

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

h1 {
  font: bold 200% Consolas, Monaco, monospace;
  width: 108ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: .05em solid;
  animation: typing 10.8s steps(108),
            caret 1s steps(1) infinite;
}

字符串長度是108;

總結(jié)：

js實(shí)現(xiàn)不用考慮兼容性，CSS3實(shí)現(xiàn)的需要考慮兼容性，還要兼顧字符串的長度and寬度且不能換行==，不能換行，不過使用起來似乎更簡單一些，具體的取舍還是看個(gè)人習(xí)慣。

補(bǔ)充:

以前看某公司的主頁有這個(gè)打字動(dòng)畫的效果，今天看發(fā)現(xiàn)有個(gè)代碼高亮的效果，于是優(yōu)化了代碼：

//...
const timer = setInterval(() => {
  const showText = textArr.slice(0, index).join("");
  textDom.innerHTML = showText;
  let current = text.substr(index, 1);
  if (current === "<") {
    index = text.indexOf(">", index) + 1;
  }
  else {
    index++;
  }
  if (index > textArr.length) clearInterval(timer);
 }, 100);
//...
input("The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.");

效果似乎還是不一樣，我要的效果應(yīng)該是輸入結(jié)束的時(shí)候才高亮，我先看看，實(shí)現(xiàn)了再補(bǔ)充...

繼續(xù)補(bǔ)充：

看來只能祭出強(qiáng)無敵的正則匹配了==

//...
const timer = setInterval(() => {
  const showText = textArr.slice(0, index).join("").replace(/([sS]*)/ig, "$1");
  textDom.innerHTML = showText;
  let current = text.substr(index, 1);
  if (current === "<") {
    index = text.indexOf(">", index) + 1;
  }   
  else {
    index++;
  } 
  if (index > textArr.length) clearInterval(timer);
}, 100);
//...
input("The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.");

完成
完整代碼：



    
        自動(dòng)打字
        
        
        
    
    
        >>>
        
        
        
The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84483.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

  • 67 個(gè)拯救前端開發(fā)者的工具、庫和資源

    摘要：庫一個(gè)用來在中創(chuàng)建炫酷的浮動(dòng)粒子的庫一個(gè)用來在中創(chuàng)建物體和空間的庫快速實(shí)現(xiàn)全屏滾動(dòng)特性打字機(jī)效果滾動(dòng)到某個(gè)元素位置時(shí)觸發(fā)一個(gè)功能語法高亮使用創(chuàng)建漂亮的圖表能夠明顯加速網(wǎng)站加載時(shí)間，鼠標(biāo)時(shí)預(yù)加載資源另一個(gè)圖表庫一個(gè)基于動(dòng)畫和平移的雪碧圖庫實(shí)現(xiàn) Javascript 庫 Particles.js? 一個(gè)用來在 web 中創(chuàng)建炫酷的浮動(dòng)粒子的庫 Three.js? 一個(gè)用來在 web 中創(chuàng)...

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

  • 11 個(gè)最好的 JavaScript 動(dòng)態(tài)效果庫

    摘要：經(jīng)過一番研究，我收集了個(gè)最好的庫，你可以用在自己的項(xiàng)目中。該庫于年月首次推出，目前仍有近名參與者開發(fā)。超過的，是一個(gè)動(dòng)畫庫，可以處理屬性單個(gè)轉(zhuǎn)換或任何屬性，以及對(duì)象。對(duì)智能設(shè)備的方向作出反應(yīng)的視差引擎快速創(chuàng)建漂亮的動(dòng)畫。 翻譯：瘋狂的技術(shù)宅原文：https://blog.bitsrc.io/11-jav... 當(dāng)我想要在網(wǎng)上找一個(gè)簡潔的 Javascript 動(dòng)效庫時(shí)，總是發(fā)現(xiàn)很多推...

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

  • CSS3 實(shí)現(xiàn)多個(gè)動(dòng)畫效果

    摘要：利用實(shí)現(xiàn)動(dòng)畫效果內(nèi)容皮球掉地上反彈起來純實(shí)現(xiàn)效果圖片移動(dòng)實(shí)現(xiàn)打字輸入效果效果更多點(diǎn)我看效果博客放在上了，歡迎大家，我會(huì)持續(xù)更新一些效果。 利用 CSS3 實(shí)現(xiàn)動(dòng)畫效果 showImg(https://segmentfault.com/img/bVUATb?w=189&h=267); 內(nèi)容 皮球掉地上反彈起來 純 CSS 實(shí)現(xiàn) gif 效果 圖片移動(dòng) 實(shí)現(xiàn)打字輸入效果 效果 // h...

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

  • 值得看看，2019 年 11 個(gè)受歡迎的 JavaScript 動(dòng)畫庫！

    摘要：超過的星星，是一個(gè)動(dòng)畫庫，可以處理屬性，單個(gè)轉(zhuǎn)換，或任何屬性以及對(duì)象。超過星星，這個(gè)動(dòng)畫庫大小只有。超過星星，這個(gè)庫基允許你以選定的速度為字符串創(chuàng)建打字動(dòng)畫。 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！ 1.Three.js showImg(https://segmentfault.com/img/bVbkQ4X?w=551&h=358); 超過46K的星星，...

    浠ラ箍 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<