-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 回答