本文详解如何在保持背景完全透明的前提下，实现逐字符输入+删除的打字机动画，并兼容视频等底层背景内容，避免遮挡。核心在于移除伪元素背景色、优化 dom 操作逻辑，并确保容器无默认遮盖。
本文详解如何在保持背景完全透明的前提下，实现逐字符输入+删除的打字机动画，并兼容视频等底层背景内容，避免遮挡。核心在于移除伪元素背景色、优化 dom 操作逻辑，并确保容器无默认遮盖。
在需要叠加动态文字动画（如打字机效果）于视频或渐变背景之上的场景中，背景透明性是刚性需求。原方案中使用 .text.sec-text:before 设置了 background-color: #010718，这会完全覆盖底层内容（如
✅ 正确做法：纯文字驱动 + 无背景伪元素
我们摒弃带填充色的光标伪元素，改用无背景色、仅保留竖线边框的 ::after 光标，并通过 JavaScript 精确控制文本内容的逐帧增删：
const text = document.querySelector(".sec-text");
// 封装可复用的延迟函数（基于 requestAnimationFrame，更流畅）
const delay = () => new Promise(r => setTimeout(() => requestAnimationFrame(r), 100));
// 打字+回删动画函数
const animate = async (str) => {
// 输入阶段：逐字符添加
text.textContent = "";
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 () => {
const phrases = ["Real Estate", "The Best Deal", "Support 24/7"];
let idx = 0;
while (true) {
await animate(phrases[idx]);
idx = (idx + 1) % phrases.length;
}
})();? CSS：零背景干扰，光标仅靠边框呈现
.text.sec-text {
position: relative;
color: #c32000;
font-size: 30px;
font-weight: 600;
/* 关键：不设置 background，不继承不透明父容器遮罩 */
}
.text.sec-text::after {
content: "";
position: absolute;
top: 0;
right: -5px; /* 光标位于文字末尾右侧 */
height: 100%;
width: 2px;
border-left: 2px solid #c32000; /* 仅用边框模拟光标，无 background-color */
animation: blink 1s infinite; /* 可选：增加闪烁效果提升可读性 */
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}? 为什么不用 background-color？
任何非 transparent 的 background-color（包括 #010718 这类深色）都会形成不透明图层，彻底阻断视频/图片背景渲染。而 border-left 是纯描边，不占据背景绘制层，天然透明。
? 注意事项与增强建议
- 容器层级安全：确保 .container 及其父元素（如 body）未设置 background-color 或 backdrop-filter 等可能引入半透明遮罩的属性；
- 视频背景示例：在 中直接插入
- 性能优化：requestAnimationFrame 替代 setTimeout 可提升动画帧率一致性；若文案较长，可将 delay() 时间降至 50ms 并配合 ease-out 缓动微调节奏；
- 无障碍友好：为 .sec-text 添加 aria-live="polite"，使屏幕阅读器能播报切换文案。
通过以上改造，.sec-text 元素将完全透明，仅呈现文字与光标，真正实现「文字浮于视频之上」的专业视觉效果——无需 hack，不依赖 opacity 或 mix-blend-mode，语义清晰、性能可控、兼容性强。
