html打字机特效,[JS插件]酷炫的打字机效果: Typed.js

一. Type.js效果演示

typedJS.gif

Type.js是一个轻量级的插件, 用于实现页面文字的打字机效果. 它使用起来非常简单, 只需要几行代码就能实现高大上的打字机效果.

二. 使用Type.js

1. 引入Type.js

方法1: ES6模块化引入(官方推荐)

//npm下载

npm install typed.js

//在js文件中用模块的方式引入

import Typed from 'typed.js';

采用该方法导入type.js需要使用Babel, 否则浏览器不能识别ES6的语法. 如果只是练手, 推荐使用下面的方法.

方法2: 常规导入

//script标签导入

//cdn导入

2. 实例化对象

//目标容器

var typed = new Typed('.element', {

strings: ["纠正一个错误的方法有很多", "而解决一个错误的终极方法，就是不给它发生的机会。"], //输入内容, 支持html标签

typeSpeed: 100, //打字速度

backSpeed: 50 //回退速度

});

如果想加入鼠标闪烁效果, 引入一下样式

.typed-cursor{

opacity: 1;

-webkit-animation: blink 0.7s infinit