带有动画的 HTML 按钮答案

【问题标题】：HTML Buttons with animations带有动画的 HTML 按钮
【发布时间】：2011-01-25 22:18:30
【问题描述】：

我正在尝试创建几个按钮，其中包含 4-5 帧动画，而不是使用典型的 CSS 方法（其中 1 个图像具有两种状态，并且 CSS 在顶部和底部之间切换），我很好奇如果有人知道如何用 4-5 帧而不是 2 帧来做到这一点。显然单独的 CSS 无法做到这一点 - 但它成为找到任何有关此信息的真正挑战。因为图像有单独的动画，我不能简单地使用不透明度来淡入新图像，它必须包含所有 4-5。任何帮助将不胜感激！

扎克

【问题讨论】：

标签： javascript html css xhtml animation

【解决方案1】：

看看k10k，看看顶部的按钮是如何完成的：动画 png 和动画 gif ;)

【讨论】：

【解决方案2】：

在没有 JavaScript 的情况下，我能想到的唯一方法是让悬停状态为背景图像加载动画 GIF。否则，您必须使用 jQuery 之类的东西来为 background-position 属性设置动画。

【讨论】：

关于 jquery 教程的任何信息？ Javascript 完全没问题 - 我似乎找不到任何适用于按钮的方法的信息。大多数是用于为 div 中的实际对象设置动画

【解决方案3】：

为此，您需要使用动画 GIF。如果你没有安装动画 GIF 创建工具，要么使用 Photoshop，这可能是大刀阔斧的，或者像GIFted motion这样的免费工具。

【讨论】：

我考虑过这一点，但是将 mouseOver 动作应用于 GIF 不起作用，对吧？ GIF 图片只是无休止地重复或运行一次，你不能用一张图片点击 mouseOver 事件

【解决方案4】：

一个非常非传统的不赞成这样做的方法是......

-将它们设置为 Flash 对象。导出 xml/flash 并将其嵌入到 htm 中

【讨论】：