用JS和CSS3实现打字动画

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用JS和CSS3实现打字动画相关的知识,希望对你有一定的参考价值。

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

用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>([sS]*)</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>([sS]*)</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>

以上是关于用JS和CSS3实现打字动画的主要内容,如果未能解决你的问题,请参考以下文章

CSS3自动打字动画,让你的文字动起来!

干货|CSS3自动打字动画,让你的文字动起来!

如何使用js捕获css3动画

JS+CSS实现CodePen首页多行打字机动画,最通俗易懂版本

怎么用js触发css3动画

编写自己的代码库(css3常用动画的实现)