带有 css 选择器的渐变文本

Question

我有这样的代码结构。我想对 3 个字母应用渐变，但它是单独应用的。那看起来不太好。我不想改变结构，因为我在动画中使用了它。

.gradient-text {
  font-size: 24px; 
  font-weight: bold; 
  display: inline-block; 
}

.gradient-text div {
  display: inline; 
  color: black; 
}

.gradient-text div:nth-child(n+4):nth-child(-n+6) span {
  /* Targets letters L to B */
  background: linear-gradient(to right, blue, red);
  -webkit-background-clip: text;
  color: transparent;
}

<div class="gradient-text">
  <div><span>A</span></div>
  <div><span>P</span></div>
  <div><span>P</span></div>
  <div><span>L</span></div> <!-- Start of the range -->
  <div><span>E</span></div>
  <div><span>B</span></div> <!-- End of the range -->
  <div><span>A</span></div>
  <div><span>L</span></div>
  <div><span>L</span></div>
</div>

Answer 1

两种可能的解决方案：

1. 如果保持相同数量的

   <div>

   和

   <span>

   对于 CSS 动画很重要，您可以对每个字母应用三个单独的较小渐变。

   .gradient-text {
     font-size: 24px; 
     font-weight: bold; 
     display: inline-block; 
   }
   
   .gradient-text div {
     display: inline; 
     color: black; 
   }
   
   .gradient-text #letterL {
     background: linear-gradient(to right, blue, #4d00b2);
     -webkit-background-clip: text;
     color: transparent;
   }
   .gradient-text #letterE {
     background: linear-gradient(to right, #4d00b2, #92006d);
     -webkit-background-clip: text;
     color: transparent;
   }
   .gradient-text #letterB {
     background: linear-gradient(to right, #92006d, red);
     -webkit-background-clip: text;
     color: transparent;
   }

   <div class="gradient-text">
     <div><span>A</span></div>
     <div><span>P</span></div>
     <div><span>P</span></div>
     <div><span id="letterL">L</span></div> <!-- Start of the range -->
     <div><span id="letterE">E</span></div>
     <div><span id="letterB">B</span></div> <!-- End of the range -->
     <div><span>A</span></div>
     <div><span>L</span></div>
     <div><span>L</span></div>
   </div>

2. 如果您可以将字母组合到同一个受影响的元素中，则渐变将应用于该元素中的所有字母。

2a) 使用现有的

<div>

、

<span>

和渐变：

.gradient-text {
  font-size: 24px; 
  font-weight: bold; 
  display: inline-block; 
}

.gradient-text div {
  display: inline; 
  color: black; 
}

.gradient-text div:nth-child(n+4):nth-child(-n+4) span {
  /* Targets letters L to B */
  background: linear-gradient(to right, blue, red);
  -webkit-background-clip: text;
  color: transparent;
}

<div class="gradient-text">
  <div><span>A</span></div>
  <div><span>P</span></div>
  <div><span>P</span></div>
  <div><span>L E B</span></div> <!-- Range: 4th-4th child (just this one) -->
  <div><span>A</span></div> 
  <div><span>L</span></div>
  <div><span>L</span></div>
</div>

2b) 添加包装器并使用

background-image

:

.gradient-text {
  font-size: 24px;
  font-weight: bold;
  display: inline-block;
}

.gradient-text div {
  display: inline;
  color: black;
}

.gradient-text #gradient >* {
  /* Targets letters L to B */
  background-image: linear-gradient(to right, blue, red);
  background-attachment: fixed;
  -webkit-background-clip: text;
  color: transparent;
  background-size: 10%;
  background-position: 10%;
}

<div class="gradient-text">
  <div><span>A</span></div>
  <div><span>P</span></div>
  <div><span>P</span></div>
  <div id="gradient">
    <div><span>L</span></div> <!-- Start of the range -->
    <div><span>E</span></div>
    <div><span>B</span></div> <!-- End of the range -->
  </div>
  <div><span>A</span></div>
  <div><span>L</span></div>
  <div><span>L</span></div>
</div>