用JS和CSS3实现打字动画

ernest.wang 发布于2019-08-20 18:25 / 2413人阅读

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

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

用JS去实现：

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

JS实现给人的感觉又臭又长，那能不能用CSS去实现呢？
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;

总结：

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("The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.");

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

继续补充：

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

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

完成
完整代码：



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

GPU服务器云服务器 jquery打字动画 js实现gif动画 css3动画高性能css3动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84483.html

用JS和CSS3实现打字动画

摘要：我们经常希望一段文本中的字符逐个显示，模拟出一种打字的效果。类似于终端命令行的感觉。我们经常希望一段文本中的字符逐个显示，模拟出一种打字的效果。类似于终端命令行的感觉。最终效果用JS去实现： html： js代码： const $ = attr => document.querySelector(attr); const textDom = $(.text); const cu...

lentoo 2019-08-01 17:17 评论0 收藏0
67 个拯救前端开发者的工具、库和资源

摘要：库一个用来在中创建炫酷的浮动粒子的库一个用来在中创建物体和空间的库快速实现全屏滚动特性打字机效果滚动到某个元素位置时触发一个功能语法高亮使用创建漂亮的图表能够明显加速网站加载时间，鼠标时预加载资源另一个图表库一个基于动画和平移的雪碧图库实现 Javascript 库 Particles.js 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js 一个用来在 web 中创...

XiNGRZ 2019-08-22 16:00 评论0 收藏0
11 个最好的 JavaScript 动态效果库

摘要：经过一番研究，我收集了个最好的库，你可以用在自己的项目中。该库于年月首次推出，目前仍有近名参与者开发。超过的，是一个动画库，可以处理属性单个转换或任何属性，以及对象。对智能设备的方向作出反应的视差引擎快速创建漂亮的动画。翻译：疯狂的技术宅原文：https://blog.bitsrc.io/11-jav... 当我想要在网上找一个简洁的 Javascript 动效库时，总是发现很多推...

wawor4827 2019-08-23 16:06 评论0 收藏0
CSS3 实现多个动画效果

摘要：利用实现动画效果内容皮球掉地上反弹起来纯实现效果图片移动实现打字输入效果效果更多点我看效果博客放在上了，欢迎大家，我会持续更新一些效果。利用 CSS3 实现动画效果 showImg(https://segmentfault.com/img/bVUATb?w=189&h=267); 内容皮球掉地上反弹起来纯 CSS 实现 gif 效果图片移动实现打字输入效果效果 // h...

since1986 2019-08-29 13:22 评论0 收藏0
值得看看，2019 年 11 个受欢迎的 JavaScript 动画库！

摘要：超过的星星，是一个动画库，可以处理属性，单个转换，或任何属性以及对象。超过星星，这个动画库大小只有。超过星星，这个库基允许你以选定的速度为字符串创建打字动画。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ 1.Three.js showImg(https://segmentfault.com/img/bVbkQ4X?w=551&h=358); 超过46K的星星，...

浠ラ箍 2019-08-23 13:59 评论0 收藏0