Mozilla Hacks

文本阴影聚光灯

头像照片 作者

发布于 2009 年 6 月 25 日 分类于 35 天、CSS 和 Firefox

15 条评论

  1. […] 原文地址：the text-shadow spotlight 系列地址：颠覆网络35天 […]

    2009 年 6 月 25 日 23:31

  2. Hans Schmucker

    嘻嘻，我又感觉自己像个小孩子了：那是几年前我见到的第一个 Java applet 之一，现在我们可以在浏览器中如此轻松地做到这一点。

    感谢，Zach！

    2009 年 6 月 26 日 09:19

  3. thinsoldier

    他什么时候才能使用 css 渐变而不是 png 来实现聚光灯效果？

    2009 年 6 月 26 日 15:56

  4. Hans Schmucker

    也许我们已经可以了……我已经有一段时间没有研究这个了
    应用一个 CSS 过滤器，该过滤器引用一个填充渐变的 SVG 元素作为图像。由于 feImage 应该像“use”一样工作，因此应该可以通过这种方式应用它。

    2009 年 6 月 26 日 16:19

  5. Zachary Johnson

    thinsoldier，如果我们有 -moz-mask 和/或 -moz-gradient CSS，以便聚光灯可以是纯 CSS 而不是 PNG，那就太棒了。

    顺便说一句，如果您使用的是 Firefox 3.0.11，您会看到聚光灯，但缺少阴影。试试 Firefox 3.5！

    2009 年 6 月 26 日 18:34

  6. Jeff Walden

    一个纯 CSS 聚光灯的想法，用实际实现草图绘制，实际实现留作读者的练习：内嵌盒阴影和圆角。我期待其他人做实际的工作。;-)

    2009 年 6 月 27 日 02:03

  7. Eduardo

    不错的演示。

    Christopher，您可以更改

    document.getElementById(‘text-shadow-box’).onmousemove = onMouseMove;

    至

    window.addEventListener(“mousemove”, …);

    这样，当鼠标移出框架时，效果仍然有效。

    2009 年 6 月 30 日 12:21

  8. […] 使用 Javascript 和 […] 的文本阴影聚光灯效果 […]

    2009 年 7 月 1 日 17:27

  9. […] 原文地址：the text-shadow spotlight 系列地址：颠覆网络35天 […]

    2009 年 8 月 18 日 22:59

  10. […] 文本阴影聚光灯 […]

    2009 年 9 月 16 日 14:30

  11. Shubham

    使用 CSS 的很棒的聚光灯效果……很棒的工作…！

    2010 年 3 月 8 日 12:38

  12. sidash

    太棒了！！！
    但我没有看到 JavaScript（

    2010 年 12 月 18 日 07:53

  13. […] 聚光灯效果工作原理的一些站点：http://www.csbsupport.com/samplecode/id389.htm（IE）https://hacks.mozilla.ac.cn/2009/06/text-shadow-spotlight/（Firefox）http://www.flashandmath.com/intermediate/spot/spotlight.html（IE）[…]

    2011 年 6 月 7 日 22:01

  14. Webliberty

    文字周围的阴影看起来很漂亮，只是这里并非所有浏览器都显示……

    2011 年 7 月 13 日 03:52

  15. Chester

    哇！这真是很酷的效果！谢谢！

    2011 年 8 月 11 日 00:24

本文的评论已关闭。