当前位置：文江博客话题详情

如何在 HTML 和 CSS 中制作发光文本

发布于 2024-10-20 13:33:10 字数 513 浏览 6 评论 0原文

我想用 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，它甚至不显示），所以我发现的关于发光的教程都没有真正适用于像 <代码>

等。

如何使文本在悬停时发光？（无图像）

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无远思近则忧 2024-10-27 13:33:10

也许可以尝试一下 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;

Have a play with CSS3 text-shadow perhaps.

text-shadow: #EEEE00 0 0 10px;

IE8 and below won't support it, but that's where filter comes in handy.

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

P.S. A neat little feature of the CSS3 text-shadow property is that it allows multiple shadows.

text-shadow: #EEEE00 0 0 10px, #FF0000 5px 5px 5px;

回复收藏 0 原文

非要怀念 2024-10-27 13:33:10

在这里查找示例 http://enjoycss.com/gallery/text_effects

在此处输入图像描述

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

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

在此处输入图像描述

回复收藏 0 原文

GRAY°灰色天空 2024-10-27 13:33:10

试试这个 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;
   }

Try this CSS3 Trick!

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

回复收藏 0 原文

我不吻晚风 2024-10-27 13:33:10

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

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

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

</body>
</html>

If you believe you have an answer to this question, please, by all means share it. As I am not going to give up on this. I want the glow effect on Text just as much as I want my coffee every morning.

I have found a half-good, half-cr*p solution in the meantime:

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

</body>
</html>

回复收藏 0 原文

~没有更多了~