CSS 文本阴影继承了关键帧上的颜色

Question

我需要将类 .shglow 应用于几个带有彩色阴影的文本，以便它可以发光。我尝试了带有颜色属性初始或根本没有颜色的关键帧。如何使其仅适用于 css ？

<div class="sh_3 shglow">Glow this red shadow</div>
<div class="sh_4 shglow">Glow this blue shadow</div>
.sh_3{text-shadow:1px 1px 1px red}
.sh_4{text-shadow:1px 1px 1px blue}
.shglow{animation:shglow .5s infinite alternate;}
@keyframes shglow
{
    0% {text-shadow:0 0 3px inherit;}
    50% {text-shadow:0 0 13px inherit;}
    100% {text-shadow:0 0 23px inherit;}
}

Answer 1

您可以使用 CSS 变量执行此操作：

.sh_3 {
  --c: red;
  text-shadow: 1px 1px 1px var(--c);
}
.sh_4 {
  --c: blue;
  text-shadow: 1px 1px 1px var(--c);
}
.shglow {
  animation: shglow .5s infinite alternate;
}
@keyframes shglow {
  0% {
    text-shadow: 0 0 3px var(--c, yellow);
  }
  50% {
    text-shadow: 0 0 13px var(--c, yellow);
  }
  100% {
    text-shadow: 0 0 23px var(--c, yellow);
  }
}

<div class="sh_3 shglow">Glow this red shadow</div>
<div class="sh_4 shglow">Glow this blue shadow</div>
<div class="shglow">Default one</div>

您也可以不指定颜色，因此将考虑默认颜色，默认颜色是元素的颜色。顺便说一下，使用此解决方案，您有义务更改元素的颜色。

.sh_3 {
  color: red;
  text-shadow: 1px 1px 1px;
}
.sh_4 {
  color: blue;
  text-shadow: 1px 1px 1px;
}
.shglow {
  animation: shglow .5s infinite alternate;
}
@keyframes shglow {
  0% {
    text-shadow: 0 0 3px;
  }
  50% {
    text-shadow: 0 0 13px;
  }
  100% {
    text-shadow: 0 0 23px;
  }
}

<div class="sh_3 shglow">Glow this red shadow</div>
<div class="sh_4 shglow">Glow this blue shadow</div>
<div class="shglow">Default one</div>