CSS3发光菜单

Question

我刚刚访问了这个website，在那里我来了这个发光的菜单（下面的一个），我的猜测是它可能通过CSS3阴影效果或类似的东西。 任何人都可以告诉我如何才能为我当前的项目取得这样的效果。 我尝试在网上搜索一些教程但找不到任何教程。 欢迎任何建议。 感谢

Answer 1

他们所做的是使用此图片

并将其移至菜单项后面（作为其容器的背景）

---

使用CSS实现类似的功能

在方形元素上使用border-radius:50%使其成为圆形，然后将box-shadow应用于软淡入淡出..

演示http://jsfiddle.net/gaby/kt4yb/

---

提示 ：阅读源及其样式以了解（使用firebug和其他Web调试工具）

Answer 2

CSS3的box-shadow是您要查看的内容：http://jsfiddle.net/3rSbP/

Answer 3

它是jst更改背景图像...你可以看到在index.css中有一个css类hovermenu0，hovermenu1，....设置背景图像，这些类适用于UL。

     <ul class="depth1 hoverMenu0">

Answer 4

使用现代浏览器，您可以直接查看他们采用何种机制来实现特定设计。

• 在Chrome和Opera上，右键单击并选择“检查元素”。

• 在Firefox上，安装Firebug插件并使用它。

• 在Safari上，使用Web Inspector。

我可能错了，但乍一看似乎他们正在使用不同的静态背景图像并使用js更改它们以响应事件（在Chrome中查找事件监听器）。但是可以在不使用静态图像的情况下在CSS3中执行此操作，尽管稍微复杂一些。