344 字
2 分钟
打字动画 Typed.js
概述
Typed.js 是一个 JavaScript 库，用于在网页上创建打字动画效果。
开始
CDN
<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>NPM
npm install typed.jsGeneral ESM Usage
import Typed from 'typed.js';
const typed = new Typed('#element', { strings: ['<i>First</i> sentence.', '& a second sentence.'], typeSpeed: 50,});HTML
<!DOCTYPE html><html><head> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script></head><body> <h1><span id="typed"></span></h1>
<script> // 初始化 Typed.js var typed = new Typed('#typed', { strings: ['Hello, World!', 'Welcome to Typed.js'], typeSpeed: 50, backSpeed: 30, loop: true }); </script></body></html>常用属性
strings：一个字符串数组，包含要展示的文本内容。typeSpeed：打字速度，表示每个字符输入的延迟时间（以毫秒为单位）。startDelay：动画开始之前的延迟时间（以毫秒为单位）。backSpeed：删除速度，表示每个字符删除的延迟时间（以毫秒为单位）。backDelay：每次删除完成后的等待时间（以毫秒为单位）。loop：一个布尔值，指示动画是否应该循环播放。loopCount：限制循环播放的次数。showCursor：一个布尔值，指示是否显示光标。cursorChar：光标的字符。cursorSpeed：光标闪烁的速度（以毫秒为单位）。smartBackspace：一个布尔值，指示是否启用智能删除，根据回退速度自动调整删除时间。shuffle：一个布尔值，指示是否在打字之前随机打乱字符串数组。contentType：指定输入的内容类型，可以是'html'、'text'或'null'。onComplete：动画完成时的回调函数。
打字动画 Typed.js
https://fuwari.vercel.app/posts/2023年/打字动画-typedjs/