以下是一个完整的 **带震动效果的网页示例**，你可以直接复制代码保存为 `.html` 文件，然后在手机浏览器中打开测试效果： --- ### 📱 **完整 HTML 示例代码** ```html

逐行打字 + 震动效果

开始打字 ``` --- ### 🧪 **测试方法** 1. **保存为 `.html` 文件** 将上述代码保存为 `vibrate-typing.html`（例如用记事本或代码编辑器保存）。 2. **在手机浏览器中打开** - 将文件传输到手机（可通过微信、邮件、云盘等方式）。 - 使用 **Chrome、Firefox 或 Safari（iOS 13+）** 打开文件。 - 点击页面上的 **“开始打字”** 按钮，观察文字逐行显示并触发震动。 3. **注意事项** - **iOS 设备**：需在 Safari 或支持震动的浏览器中测试，且震动可能需要用户首次交互后才能触发。 - **震动权限**：部分浏览器可能需要用户手动允许震动权限。 - **无震动设备**：代码会自动跳过震动，仅显示文字。 --- ### 📝 **效果说明** - **逐行显示**：文字会像打字机一样一行一行出现。 - **震动反馈**：每显示一行文字，手机会短促震动一次。 - **兼容性处理**：如果设备不支持震动，代码会自动跳过震动逻辑，避免报错。 --- ### 💡 **扩展建议** - **逐字震动**：将 `textLines` 拆分为字符数组，实现逐字震动效果。 - **语音同步**：结合 `SpeechSynthesisUtterance`，实现文字+语音+震动三重反馈。 - **动画增强**：添加 CSS 光标闪烁动画（如 `_` 闪烁），模拟真实打字机效果。 如果需要更复杂的交互（如暂停、加速、音效等），可以进一步扩展代码！