博客页面不仅需要简介大方漂亮美观,还需要一些动态的效果,如果引入动态的GIF图片其大小会影响页面的加载速度,这里推荐一个JavaScript的打字机效果库Typed.js,其漂亮的打字机效果和简单的使用方法,值得博主拥有。
CDN
<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
NPM
npm install typed.js
Yarn
yarn add typed.js
引入cdn之后,创建一个DOM用来展示文字,在JavaScript中可以设置打字机的效果参数。
<!-- Element to contain animated typing -->
<span id="element"></span>
<!-- Setup and start animation! -->
<script>
var typed = new Typed('#element', {
strings: ['<i>First</i> sentence.', '& a second sentence.'],
typeSpeed: 50,
});
</script>
在这个页面的最底部,可以看到我添加的打字机效果,我的配置参数如下:
<script>
const typed = new Typed('#typed', {
strings: ['这里是你要输出的文字','hello world'
],
typeSpeed: 250,
backSpeed: 100,
backDelay: 100,
startDelay: 1000,
loop:true
});
</script>
具体的参数,这里就不在介绍了,大家可以查看官方的文档是实例,自己手动改改就能了解这些参数的含义了。