17

我想用 HTML 和 CSS 制作发光的文本。我正在关注本教程。

http://msdn.microsoft.com/en-us/library/gg589484(v=VS.85).aspx#creating_%22glow%22_effects_with_drop_shadows

我希望文本发光，就像将鼠标悬停在 Windows Vista 和 7 上的最小化、最大化和退出按钮一样发光。

我已经在线阅读了 8 个教程，都说 FILTER 只能在 IE 上运行（顺便说一句，我使用的是 IE9 RC，它甚至不显示），所以我发现的关于发光的教程都没有真正适用于诸如此类的<p>, <a> <h1>文本.

如何让我的文字在悬停时发光？（无图像）

4

4 回答 4

35

或许可以试试 CSS3 text-shadow。

text-shadow: #EEEE00 0 0 10px;

IE8 及以下不支持它，但那是filter派上用场的地方。

filter: glow(color=#EEEE00,strength=3);

PS CSS3 text-shadow 属性的一个巧妙的小特性是它允许多个阴影。

text-shadow: #EEEE00 0 0 10px, #FF0000 5px 5px 5px;
于 2011-03-05T05:44:53.827 回答
11

在此处查找示例http://enjoycss.com/gallery/text_effects

在此处输入图像描述

您可以在编辑器中打开它们中的每一个并调整任何 css3 参数，然后只需通过 enjoycss 获取您需要的 css3 代码（它将生成）

例如http://enjoycss.com/39/1#textShadow

在此处输入图像描述

于 2014-03-02T00:50:04.223 回答
1

试试这个 CSS3 技巧！

.text-glow {/*Definig font could be useful!*/
   font-size:4em;
   color: #FFFFFF;
   font-family:Arial;
   }
.text-glow:hover {
text-shadow: 1px 0px 20px #ffd200;
-webkit-transition: 1s linear 0s;
-moz-transition: 1s linear 0s;
-o-transition: 1s linear 0s;
transition: 1s linear 0s;
outline: 0 none;
   }
于 2014-02-10T21:49:56.953 回答
0

如果你相信你有这个问题的答案，请务必分享。因为我不会放弃这一点。我想要 Text 上的发光效果，就像我每天早上想要咖啡一样。

与此同时，我找到了一个半好半 cr*p 的解决方案：

<DOCTYPE html>  
<html>
<head>
<title>HTML5 &amp; CSS3 Samples</title>
<style>
  p {
  filter:progid:DXImageTransform.Microsoft.Glow(Strength, Color, Enabled);
    }
</style>
</head>
<body>
<center>
<p>Welcome!</p>
</center>

</body>
</html>
于 2011-03-05T06:26:18.467 回答