0

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

带有过渡效果的悬停时 CSS 文本发光

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

<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 的菜鸟。:(

4

3 回答 3

1

可能是你看不到阴影，因为它是白色的。但是，它的工作正常且顺利。只是减少时间，3秒太多了。

这是工作演示

或者，如果您只想要一个白色阴影，请参见此处

于 2012-09-03T14:49:56.383 回答
0

我删除了过渡 CSS，因为它似乎搞砸了，我将颜色更改为黑色：

http://jsfiddle.net/Ce5SB/

于 2012-09-03T14:42:27.620 回答
0

对于 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*/
于 2012-09-03T14:42:37.357 回答