简介
typing.css 是一款基于 CSS3 实现的打字机效果库，可以很方便地给网站添加打字机效果。它支持多种效果模式、多种速度模式，而且还可以自定义文本、文本颜色以及背景色。
安装
使用 npm 安装：
npm install typing.css
或者使用 Yarn 安装：
yarn add typing.css
使用
1. 引入样式
在 HTML 中引入样式文件：
<link rel="stylesheet" href="node_modules/typing.css/dist/typing.css">
2. 创建 HTML
在 HTML 中创建一个元素，例如一个段落：
<p id="text"></p>
3. 初始化
在 JavaScript 中初始化 typing.css：
var text = document.getElementById('text');
var options = {
text: ['Hello world!', 'Welcome to my website.'],
loop: true,
speed: 'normal'
};
var typing = new Typing(text, options);
typing.init();4. 配置选项
typing.css 提供了多种配置选项，可以根据实际需要进行设置。下面是常见的配置选项：
text：要显示的文本，可以是一个字符串或一个字符串数组。loop：是否循环播放，默认为true。speed：打字速度，可以是'slow'、'normal'或'fast'，也可以是一个数字，单位是毫秒，默认为'normal'。cursor：光标的显示方式，可以是一个字符串或一个对象，具体配置请见文档。
更多配置选项请参考官方文档。
示例
下面是一个完整的例子，演示了 typing.css 的基本用法和一些效果：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----------------- --------------- ----- ---------------- ----------------------------------------------- ------- ------ -------------- ------------ -- -------------- ------- ---------------------- ------- -------
-- -------------------- ---- -------
--- ---- - --------------------------------
--- ------- - -
----- -
------ --------
-------- -- -- ----------
-- -- - --------- ------------
-- ------ ------- ----------
--
------ ----
------- -
------ ----
----------- ---
-
--
--- ------ - --- ------------ ---------
--------------总结
typing.css 是一款简单易用的打字机效果库，它支持多种效果模式、多种速度模式和自定义文本。使用它可以让网站更加生动有趣，吸引更多的用户。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c881e8991b448e8f22