如何修改第二行文本Reveal动画背景色并强调指定单词？

1. 调整HTML结构 #

给第二行文本单独加标识类，同时把需要加粗的deserves用<span>包裹，实现精准样式控制：

<div class="reveal-group">
  <div class="reveal-text">This is the first line.</div>
  <div class="reveal-text reveal-text--orange">It <span class="text-bold">deserves</span> everything.</div>
</div>

2. 修改CSS样式 #

基于你原有的Reveal动画代码，只需要新增/修改以下规则，不会破坏原有布局：

/* 保留你原有的基础Reveal动画样式 */
.reveal-text {
  position: relative;
  overflow: hidden;
  /* 你的原有字体、字号等样式 */
}

.reveal-text::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000; /* 默认遮罩背景色 */
  animation: revealAnim 1.2s forwards;
}

/* 第二行的橙色遮罩 */
.reveal-text--orange::after {
  background-color: #FE9226;
}

/* 加粗指定单词 */
.text-bold {
  font-weight: 800;
}

/* 保留你原有的动画关键帧 */
@keyframes revealAnim {
  to {
    transform: translateX(100%);
  }
}

关于之前布局混乱的原因 #

大概率是你新建的类没有继承原有.reveal-text的核心布局属性（比如position: relative和overflow: hidden），导致遮罩元素脱离了文本块范围。上面的写法是在原有基础样式上扩展，不会干扰原有布局逻辑。

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