[javascript]酷炫的打字机效果: Typed.js

一. Type.js效果演示



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标签导入
<script src="./typed.js"></script>

//cdn导入
  <script src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>

2. 实例化对象
 <span class="element"></span>
//目标容器
<script>
var typed = new Typed('.element', {
strings: ["纠正一个错误的方法有很多", "而解决一个错误的终极方法，就是不给它发生的机会。"], //输入内容, 支持html标签
typeSpeed: 100, //打字速度
backSpeed: 50 //回退速度
loop: true, // 循环打字
});
</script>



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

 .typed-cursor{
opacity: 1;
 -webkit-animation: blink 0.7s infinite;
 -moz-nimation: blink 0.7s infinite;
 animation: blink 0.7s infinite;
 }
@keyframes blink{
 0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
 }
@-webkit-keyframes blink{
0% { opacity:1; }
 50% { opacity:0; }
 100% { opacity:1; }
 }
@-moz-keyframes blink{
0% { opacity:1; }
 50% { opacity:0; }
 100% { opacity:1; }
 }


3. 效果演示



参考：https://www.jianshu.com/p/37ff22decc62?from=singlemessage