typed.js实现

 HTML之typed.js

首先引入js

<script src="https://cdn.bootcss.com/typed.js/2.0.9/typed.min.js"></script>

源代码放入body中可以直接运行。

<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: [
            'First test.',
            'Second test, \nit will pause for three seconds. ^3000',
            "Second test, \nthe last sentence will go back to 'Second test, ', \noh no, this is the third test. ^1000",
            "It's going to start repeating."
        ],
        typeSpeed: 50,   //打印速度
        startDelay: 300, //开始之前的延迟300毫秒
        loop: true,      //是否循环
    };
    var typed = new Typed('#typed', options);
</script>