本文详解如何在保持背景完全透明的前提下，实现逐字输入+删除的循环打字机动画，适配视频背景等需要穿透显示的场景，核心在于移除伪元素遮罩、优化 css 渲染逻辑并采用 requestanimationframe 驱动平滑动画。
本文详解如何在保持背景完全透明的前提下，实现逐字输入+删除的循环打字机动画，适配视频背景等需要穿透显示的场景，核心在于移除伪元素遮罩、优化 css 渲染逻辑并采用 requestanimationframe 驱动平滑动画。
在构建现代网页标题动画（如首页主视觉文案轮播）时，常需将动态文字叠加在视频或渐变背景之上。此时若使用传统 background-color 或 ::before/::after 伪元素覆盖层（如原代码中 .sec-text:before 的深色背景块），会直接遮挡底层内容，破坏设计意图。解决的关键在于：彻底放弃任何不透明遮罩，仅通过纯文本内容变化 + 光标动画模拟“打字感”，同时确保所有元素背景默认透明（transparent）。
以下为完整可运行方案：
✅ 正确做法：纯文本驱动 + 透明光标
JavaScript 部分改用 async/await 控制字符级节奏，并利用 requestAnimationFrame 提升动画流畅度（避免 setTimeout 时间抖动）：
const text = document.querySelector(".sec-text");
const phrases = ["Real Estate", "The Best Deal", "Support 24/7"];
// 基于 RAF 的毫秒级延迟工具（更精准）
const delay = () => new Promise(resolve => {
setTimeout(() => requestAnimationFrame(resolve), 100);
});
const animatePhrase = async (str) => {
// 逐字添加
for (const char of str) {
text.textContent += char;
await delay();
}
// 暂停 1 秒后逐字删除
await new Promise(r => setTimeout(r, 1000));
let current = str;
while (current.length > 0) {
current = current.slice(0, -1);
text.textContent = current;
await delay();
}
};
// 循环播放
(async () => {
let idx = 0;
while (true) {
await animatePhrase(phrases[idx]);
idx = (idx + 1) % phrases.length;
}
})();✅ CSS 关键改造：零背景 + 真实透明光标
原 .sec-text:before 的 background-color: #010718 是问题根源——它本质是“画一块黑板”再在其上打字。新方案改为 仅用 border-left 模拟光标，且确保 background-color 始终为 transparent（显式声明，避免继承污染）：
.container .text.sec-text {
position: relative;
color: #c32000;
font-size: 30px;
font-weight: 600;
/* 关键：显式设为透明，杜绝意外遮挡 */
background-color: transparent;
}
/* 仅用 border-left 作光标，不占背景空间 */
.text.sec-text::after {
content: "";
position: absolute;
top: 0;
right: -5px; /* 光标位于文字末尾右侧 */
height: 100%;
width: 2px;
background-color: currentColor; /* 自动继承文字颜色 */
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}? 注意：::after 使用 currentColor 而非固定色值，确保光标颜色随 .sec-text 的 color 动态同步；right: -5px 实现光标紧贴文字右侧，比 left: 100% 更稳定。
✅ HTML 结构精简（无冗余容器）
<div class="container"> <span class="text first-text">Absolute</span> <span class="text sec-text"></span> <!-- 内容由 JS 动态填充 --> </div>
⚠️ 重要注意事项
- 勿用 opacity: 0 隐藏文字：这会导致光标不可见，应始终让 textContent 为空字符串 "" 初始状态；
- 禁用 overflow: hidden 影响光标：.container 的 overflow: hidden 可能裁剪光标，若需保留请确保 .sec-text::after 的 right 偏移量足够；
- 响应式适配：在移动设备上，建议将 font-size 改为 rem 或 vw 单位，并调整 delay() 时长（如降至 60ms）提升感知流畅度；
- 性能提示：高频 DOM 操作（textContent 赋值）已足够轻量，无需进一步优化；但若需支持上百个词组，建议用 DocumentFragment 批量更新。
此方案彻底解耦文字渲染与背景控制，使
