打字机效果 | 使用type.js模拟打字输入回退效果

我的博客：https://blog.justlovesmile.top

今天在Github上发现了一个有趣的开源项目typed.js

• github地址：https://github.com/mattboldt/typed.js/
• 文档：https://mattboldt.github.io/typed.js/docs/

导入js

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>

实现效果

  try {
    var typed = new Typed("#typed", {
    strings: ['醒亦念卿，梦亦念卿','频繁记录，只因生活和你太值得❤'],//字符串
    startDelay: 0,//开始的延迟
    typeSpeed: 200,//打字速度
    backSpeed: 100,//回退速度
    loop: true,//是否循环
    showCursor: true,//显示游标
    shuffle: false//是否随机
    });
  } catch (err) {
  }

游标样式

  try {
    var typed1 = new Typed("#typed1", {
    //一大堆同上
    cursorChar: '_',//游标样式
    });
  } catch (err) {
  }

批量输入

  try {
    var typed2 = new Typed("#typed2", {
    strings: ['醒亦念卿，梦亦念卿\n `频繁记录，只因生活和你太值得❤`'],//字符串
    //一大堆同上
    });
  } catch (err) {
  }

智能退格

  try {
    var typed3 = new Typed("#typed3", {
    strings: ['我想说：我','我想说：爱','我想说：你'],//字符串
    smartBackspace: true, //默认true
    //一大堆同上
    });
  } catch (err) {
  }