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变量执行此操作：

＆＃13;

.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);
  }
}

＆＃13;

<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>

＆＃13;

您可能也没有指定颜色，因此将考虑默认颜色，默认颜色为元素的颜色。顺便说一句，使用此解决方案，您必须更改元素的颜色。

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

CSS text-shadow在关键帧上继承了颜色

1 个答案: