-4

我刚刚访问了这个网站，在那里我看到了这个发光的菜单（底部），我的猜测是它可能通过CSS3阴影效果或类似的东西来实现。任何人都可以让我知道如何为我当前的项目实现这样的效果。我尝试在网上搜索一些教程，但找不到任何教程。欢迎任何建议。谢谢

4

4 回答 4

2

他们所做的是他们使用这张图片

三星背景图片

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

用 CSS 实现类似的东西

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

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

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

于 2012-04-10T10:31:09.917 回答
1

CSS3box-shadow是你想看的：http: //jsfiddle.net/3rSbP/

于 2012-04-10T10:32:54.977 回答
1

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

     <ul class="depth1 hoverMenu0">
于 2012-04-10T10:37:24.180 回答
0

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

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

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

  • 在 Safari 上，使用 Web Inspector。

我可能错了，但乍一看，它们似乎使用不同的静态背景图像并使用 js 响应事件来更改它们（在 Chrome 中查找事件侦听器）。但是可以在 CSS3 中不使用静态图像来做到这一点，尽管稍微复杂一些。

于 2012-04-10T10:26:37.097 回答