网页插入一段文字的打字机效果，逐字出现循环回退删除动画

最近主题的更新是想让页面更加丰富起来，因为之前为了界面清爽删掉了很多功能，虽然一种程度上算是简约，但是对于个人博客来说不想只包含文章，还应该多一些信仰之力。所以为了高大上的逼格（狗头）所以分析了一下Butterfly主题的打字机效果。

Butterfly用的是typed.js来做的打字机效果。开箱即用，非常好用。

效果预览

见页面底部

页面底部打字机效果

安装教程

这里提供两种代码实现方式，根据业务需求来

Butterfly可以使用pug代码，如下

#footer-banner-tips
    
script(src='https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js')
script.
  var typed = new Typed("#footer-banner-tips", {
  strings: ["用行动去思考，去改变、去创造。","Take action to think, to change, to create."],
  startDelay: 200,
  backDelay: 2000,
  typeSpeed: 100,
  loop: true,
  backSpeed: 20
  })

其他项目可以使用html代码，如下


<div id="footer-banner-tips">
  <script src="https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js"></script>
  <script>
    var typed = new Typed("#footer-banner-tips", {
    strings: ["用行动去思考，去改变、去创造。","Take action to think, to change, to create."],
    startDelay: 200,
    backDelay: 2000,
    typeSpeed: 100,
    loop: true,
    backSpeed: 20
    })
  </script>
</div>