Question

我正在尝试按照本教程，因为我非常喜欢这种效果。

CSS Text Glow on Hover with Transition Effects

但问题是，我将背景颜色设置为白色。

<style>
.text-glow-hover-with-delay{
background: #FFFFFF;
color: #fff;
transition: text-shadow 3s;
-moz-transition: text-shadow 3s; /* Firefox 4 */
-webkit-transition: text-shadow 3s; /* Safari and Chrome */
-o-transition: text-shadow 3s; /* Opera */
}

.text-glow-hover-with-delay:hover{
text-shadow: 0 0 10px #fff;
}
</style>

<div class="text-glow-hover-with-delay">
Put your mouse over me and I will glow slowly.
</div>

现在它不再发光了。我在这里是CSS的菜鸟。：（

Answer 1

可能是你无法看到阴影导致其白色。但是，它的工作正常而顺利。只需减少时间，3秒就太多了。

Here is the working DEMO

或者，如果你只想要一个白色的阴影See Here

Answer 2

我删除了过渡CSS，因为它似乎弄乱了它并且我改变了颜色tpo black：

http://jsfiddle.net/Ce5SB/

Answer 3

对于css过渡，您必须从A点到B点。

这意味着A点应该在默认类上有默认的文本阴影。

 .text-glow-hover-with-delay{
      text-shadow:0 0 0 #fff;/*This is the missing piece*/

      ....
 }

如果缺少上述部分，B点将知道从哪里过渡。

如果以上情况不起作用，也请告诉我。您可能还想尝试转换为

 transition:all 300ms ease;/*just in case each browser wants to capture its browser specific text shadow property*/

请帮忙！ CSS3发光过渡问题

3 个答案: