导航栏的动画图像
我正在尝试构建一个导航栏，在悬停/单击时显示动画 gif 作为文本背景。
例如 - 我想要一个只有 3 个链接的导航栏 - 主页、目录和联系方式。当用户滚动到其中一个菜单时，会出现一个动画 gif(?) 或 css/jquery 动画，其中一个圆圈在文本后面增大，然后当鼠标滚动到另一个菜单时再次收缩（并且在该菜单上会出现相同的效果） 。
有没有人见过这样的东西 - 是否可以使用动画 gif 作为翻转图像 - 唯一的问题是当我将鼠标悬停在链接之外时，我将无法再次缩小圆圈......
希望这是有道理的，有人可以帮忙！
谢谢 京东
I am trying to build a navigation bar that shows an animated gif on hover/click as a backdrop to the text.
For example - I want to have a navigation bar with just 3 links - Home, Catalogues and Contact. When the user scrolls over one of the menus an animated gif(?) or css/jquery animation occurs where a circle grows behind the text and then shrinks again when the mouse scrolls to a different menu (and the same effect occurs on that one).
Has anyone seen anything like this - and is it possible to use an animated gif as a rollover image - the only issue with this is I wouldnt be able to then shrink the circle again when hovered away from the link......
Hope this makes sense and someone can help!!!
Thanks
JD
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可以使用 jQuery 通过 .hover() 和 .animate()。您可以在这里找到一个工作示例： http://colorpowered.com/blend/
的第二部分你的问题。是的，您可以使用 gif 动画作为翻转图像。
You can use jQuery to create special effect by using .hover() and .animate(). You can find a working example here: http://colorpowered.com/blend/
And for the second part of your question. Yes, you can use animated gifs as a rollover image.
你可以尝试一些jquery插件，比如jquery背景位置，并通过移动背景图像来创建动画效果，你可以尝试这个演示
you can try some jquery plugin like jquery background position and create animation effect by moving the background image, you can try this demo