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

  • Post author:
  • Post category:其他



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

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

typed.js



导入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) {
  }



版权声明:本文为qq_43701912原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。