用JS和CSS3实现打字动画

2024年2月23日 157次阅读 来源: shiyangzhaoa

我们经常希望一段文本中的字符逐个显示，模拟出一种打字的效果。类似于终端命令行的感觉。最终效果

用JS去实现：

html：

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

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去实现：

JS实现给人的感觉又臭又长，那能不能用CSS去实现呢？
html：

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

总结：

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>');

效果似乎还是不一样，我要的效果应该是输入结束的时候才高亮，我先看看，实现了再补充…

继续补充：

看来只能祭出强无敌的正则匹配了==

//...
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>');

完成
完整代码：

<!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>
    原文作者：shiyangzhaoa
    原文地址: https://segmentfault.com/a/1190000010420880
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞