如何在纯CSS多行打字机效果中为加粗文字加背景色并保留动画？

要实现加粗文字随打字机动画同步显示背景高亮，我们可以通过给<strong>标签添加mask遮罩动画，让背景色的显示进度和父容器的打字机动画完全同步。以下是修改后的完整代码：

修改后的CSS代码 #

body {
  font-size:30px;
  padding:20px;
  background:#F7F7F7;
  color:#333;
  font-family: arial, sans-serif;
}
h1 {
  max-width: 900px;
}
.type {
  color: transparent;
  background:
    linear-gradient(-90deg,#333 5px,transparent 0) 10px 0, /* 闪烁光标 */
    linear-gradient(#333 0 0) 0 0; /* 普通文字颜色 */
  background-size: calc(var(--n)*1ch) 200%;
  background-clip: padding-box, text;
  -webkit-background-clip: padding-box, text;
  background-repeat: no-repeat;
  animation: 
    cursor-blink .7s infinite steps(1),   
    typewriter calc(var(--n)*.05s) steps(var(--n)) forwards;
}
/* 给加粗文字添加高亮背景和同步遮罩动画 */
.type strong {
  background-color: #ffeb3b; /* 高亮背景色，可自定义 */
  padding: 0 2px; /* 给高亮区域添加左右内边距，优化视觉效果 */
  /* 遮罩实现背景随打字进度显示 */
  mask: linear-gradient(90deg, black 0, black) 0 0 / calc(var(--n)*1ch) 100% no-repeat;
  -webkit-mask: linear-gradient(90deg, black 0, black) 0 0 / calc(var(--n)*1ch) 100% no-repeat;
  animation: mask-type calc(var(--n)*.05s) steps(var(--n)) forwards;
}
/* 打字机文字展开动画 */
@keyframes typewriter {
  from {
    background-size: 0 200%;
  }
}
/* 光标闪烁动画 */
@keyframes cursor-blink {
  50% {
    background-position: 0 -100%, 0 0;
  }
}
/* 高亮背景遮罩展开动画 */
@keyframes mask-type {
  from {
    mask-size: 0 100%;
    -webkit-mask-size: 0 100%;
  }
}

修改后的HTML代码 #

<h1><span class="type" style="--n:200">Lorem ipsum dolor <strong>sit amet</strong>, consectetur adipiscing elit. Mauris sit amet <strong>tincidunt</strong> urna. </span></h1>

关键修改说明 #

• 给.type strong设置固定背景色，并通过padding调整高亮区域的视觉范围，避免高亮紧贴文字边缘。
• 使用mask（兼容-webkit前缀）属性创建遮罩层，遮罩的宽度动画与父容器的打字机动画完全同步，确保高亮背景随文字一起逐段“被打出”。
• 拆分原动画名称为更具语义化的命名，提升代码可读性。

内容的提问来源于stack exchange，提问作者siaeva