几天以来我一直在研究 box-shadow 和 text-shadow。我正在努力获得以下效果。我想要从文字中散发出光芒<a>
一度盘旋。很简单,这应该很容易,因为我探索了使用文本阴影。好的,但它适用于小发光,我的意思是,一旦发光较大,由于其高度模糊,您就看不到发光。必须有一个解决方案。一张图片比 100 个单词更能解释。
这就是我想要获得的:
LINK:
HOVER:
这是我用过的代码
#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 实现宽而高的发光效果。
您可以添加多个文本阴影:
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/ http://jsfiddle.net/pzMmC/ -
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)