用JS和CSS3實現打字動畫

時間 2019-11-08

原文原文鏈接

咱們常常但願一段文本中的字符逐個顯示，模擬出一種打字的效果。相似於終端命令行的感受。最終效果css

用JS去實現：

html：html

<span class="text"></span>
<i class="cursor" style="display: none; border-right:2px solid #fff;"></i>

js代碼：git

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去實現：

JS實現給人的感受又臭又長，那能不能用CSS去實現呢？
html：github

<h1>The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.</h1>

@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;dom

總結：

js實現不用考慮兼容性，CSS3實現的須要考慮兼容性，還要兼顧字符串的長度and寬度且不能換行==，不能換行，不過使用起來彷佛更簡單一些，具體的取捨仍是看我的習慣。優化

補充:

之前看某公司的主頁有這個打字動畫的效果，今天看發現有個代碼高亮的效果，因而優化了代碼：動畫

//...
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('<span>The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is </span><span style="color: #415caa">the successor of the ZGMF-X10A Freedom.</span>');

效果彷佛仍是不同，我要的效果應該是輸入結束的時候才高亮，我先看看，實現了再補充...spa

繼續補充：

看來只能祭出強無敵的正則匹配了==命令行

//...
const timer = setInterval(() => {
  const showText = textArr.slice(0, index).join('').replace(/\<span\>([\s\S]*)\<\/span\>/ig, '\<span style="color: #415caa"\>$1\<\/span\>');
  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 <span>the successor of the ZGMF-X10A Freedom.</span>');

完成
完整代碼：code

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>自動打字</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body {
                background: #000;
                color: white;
            }
            @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;
            }
        </style>
    </head>
    <body>
        <span>&gt;&gt;&gt;</span>
        <span class="text"></span>
        <i class="cursor" style="display: none; border-right:2px solid #fff;"></i>
        <h1>The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.</h1>
        <script>
            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('').replace(/\<span\>([\s\S]*)\<\/span\>/ig, '\<span style="color: #415caa"\>$1\<\/span\>');
                textDom.innerHTML = showText;
                var current = text.substr(index, 1);
                if (current === '<') {
                    index = text.indexOf('>', index) + 1;
                }   
                else {
                    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 <span>the successor</span> of the ZGMF-X10A Freedom.');
        </script>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。