打字机效果插件Typed.js,介绍typed.js的正确使用方法

主要特点:

易于使用：通过简单的配置，就可以在网页上实现打字效果。
高度可配置：可以自定义打字速度、打字时间间隔、回退速度等。
多种模式：支持打字、删除、打字后再删除等不同的动画模式。
无依赖：Typed.js 不依赖于任何第三方库，可以直接在网页上使用。
跨浏览器兼容：支持主流的浏览器，包括最新的版本。

前言

笔者在今天下午偶然看到一个博主的博客内有段文字是以打字机的效果进行显示的，然后找到了typed.js，在使用的过程中出现了不显示设置的第一句话的错误，找到原因后在此记录一下

typed.js介绍
typed.js是一个类型化库，效果是用打字机的方式显示一段话，可以自定义任何字符串、指定显示速度、指定是否循环等。

传送门：官网 、GitHub

简单使用

<!-- 核心代码 -->

<span id="typed" style="white-space: pre-wrap;line-height: 30px;"></span>

<!-- 在span标签内加入 white-space: pre-wrap 样式，在strings内的语句中加入\n换行符可以实现换行 -->

<script src="https://cdn.bootcss.com/typed.js/2.0.9/typed.min.js"></script>
<script type="text/javascript">
    var options = {
        strings: [
            '~Welcome to 玩转网~',
            'www.902d.com~  \nThe hard-working bee never has time to grieve. ^3000',
            "Second test, \nIf it is a rose, it will always bloom, ~ \nFailure is the final test of perseverance. ^1000",
            "It's going to start repeating."
        ],
        typeSpeed: 50,   //打印速度
        startDelay: 300, //开始之前的延迟300毫秒
        loop: true,      //是否循环
    };
    var typed = new Typed('#typed', options);
</script>

 

效果图:

更多设置请查看官方文档或者自行搜索

结语

非常感谢各位的阅读!~