Vue3 神级工具:终于可以实现打字的动画效果了!

myzbx 2025-09-14 23:24 50 浏览

Typed.js 是一个轻量级的 JavaScript 库，用于在网页上实现打字机动画效果。它支持自定义打字速度、循环模式、回调函数等，非常适合用于动态展示标语、代码片段或交互式文本效果。

核心特性

打字动画：模拟逐字输入和删除的效果。
高度可配置：调整速度、循环次数、光标样式等。
回调函数：在动画开始、结束或每次循环时触发自定义逻辑。
无依赖：纯 JavaScript 实现，无需 jQuery 或其他库。

基础用法示例

<!DOCTYPE html>
<html>
<head>
<!-- 引入 Typed.js -->
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
</head>
<body>
<!-- 定义一个展示动画的容器 -->
<div id="typed-text"></div>

<script>
    // 当 DOM 加载完成后初始化
    document.addEventListener('DOMContentLoaded', function () {
      // 配置参数
      const options = {
        strings: ["Hello World!", "欢迎使用 Typed.js", "Typing Effect "], // 要显示的文本数组
        typeSpeed: 100,    // 打字速度（毫秒）
        backSpeed: 50,     // 回删速度
        loop: true         // 是否循环
      };

      // 初始化 Typed 实例，绑定到 HTML 元素
      const typed = new Typed('#typed-text', options);
    });
  </script>
</body>
</html>

进阶配置示例

const typed = new Typed('#typed-element', {
  strings: [
    '第一段文字',
    '第二段文字 <strong>支持 HTML 标签</strong>', // 支持内嵌 HTML
    '甚至可以嵌入图标 <i class="fa fa-smile"></i>'
  ],
  typeSpeed: 40,          // 打字速度
  backSpeed: 20,          // 回删速度
  startDelay: 500,        // 开始前的延迟
  backDelay: 1500,        // 删除后的停顿
  smartBackspace: true,   // 智能删除（匹配上一段文字）
  showCursor: true,       // 显示光标
  cursorChar: '|',        // 自定义光标符号
  loopCount: 3,           // 循环次数（Infinity 表示无限）

// 回调函数
  onComplete: (self) => {
    console.log('动画完成！', self);
  },
  preStringTyped: (pos, self) => {
    console.log(`开始输入第 ${pos + 1} 段文字`);
  }
});

关键配置项说明

DOM 动画

上一篇：创建酷炫动画效果的10个JavaScript库
下一篇：Dynamics.js – 创建逼真的物理动画的 JS 库

Vue3 神级工具:终于可以实现打字的动画效果了!

核心特性

基础用法示例

进阶配置示例

关键配置项说明

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿