CSS:发光的文字,发光非常宽和高

时间:2012-10-01 12:26:49

标签: css hover css3 glow

我正在调查有些日子的盒子阴影和文字阴影。我试图获得以下效果。我希望<a>的文字一旦发出嗡嗡声就会发出光芒。很简单,当我使用文本阴影进行探索时,这应该很简单。好吧,但是它适用于小发光,我的意思是,一旦发光变大,你就会因为高模糊而无法看到发光。必须有一个解决方案。图像将解释超过100个单词。

这是我想要获得的:

链接:

enter image description here

HOVER:

enter image description here

这是我用于

的代码
#projectBox a:LINK{
    background-image: url('../_img/showcase/projectTabs/link.png');
}

#projectBox a:HOVER{
    background-image: url('../_img/showcase/projectTabs/link.png');
    color:#fa0000;
    text-shadow: 0 0 80px white;
}

我知道我可以再次使用背景图片来悬停,但我想避免这种情况。问题是,如果你添加更多的模糊它不再出现,因为它太模糊了。另外两个属性并没有太多帮助,因为我希望从中间开始发光。

让我们一起解决这个问题,看看我们如何利用CSS做出广泛而高效的发光效果。

3 个答案:

答案 0 :(得分:3)

您可以添加多个文字阴影:

text-shadow: 
-3px 0px 10px #FFF,
3px 0px 10px #FFF,
0px 0px 10px #FFF,
-3px -3px 10px #FFF,
3px -3px 10px #FFF,
0px -3px 10px #FFF,
-3px 3px 10px #FFF,
3px 3px 10px #FFF,
0px 3px 10px #FFF;

这将为您提供更宽广,更饱满的光晕,因为文本周围有9个独立的阴影。调整值以获得您正在寻找的强度。

(这些值是随机猜测 - 我手机上未经测试):)

http://jsfiddle.net/pzMmC/ -

答案 1 :(得分:2)

您可以叠加同心阴影以增加效果:

a:hover {
    text-shadow: 0 0 80px white,
                 0 0 70px white,
                 0 0 60px white,
                 0 0 50px white,
                 0 0 40px white,
                 0 0 30px white;
}

我写了一个测试:http://jsfiddle.net/simbirsk/DnHKk/

答案 2 :(得分:1)

为什么不使用CSS3的渐变?

看看this小提琴。

您可以生成自己的渐变herehere