【发布时间】：2012-09-08 03:30:12
【问题描述】：
我想知道是否有一种方法可以在使用 HTML5/javascript 按下（不翻转）按钮时为其设置动画？
我想创建一个几乎卡通化的按钮，按下时会稍微扩展并闪闪发光。我知道这听起来有点俗气，但我认为最终结果会比听起来更好。
我的灵感是？新的超级马里奥兄弟游戏中的块。
【问题讨论】：
标签： html animation button pressed
【发布时间】：2012-09-08 03:30:12
【问题描述】：
您要查找的内容是由 CSS3 创建的，而不是 HTML5。
这是一篇博文，其中包含十个不同教程的链接，这些教程是关于使用 CSS3 制作各种酷按钮的：http://www.catswhocode.com/blog/top-10-css3-buttons-tutorials。
许多按钮在使用 :hover 选择器滚动时会展开和填充。如果您希望在按下时应用样式，只需替换 :active 选择器即可。
希望这能让你开始。
【讨论】：
-
感谢您的链接。这些按钮看起来不错。我将不得不阅读他们，看看他们能做什么。但从表面上看，它们中的大多数看起来都只有上下状态。我正在寻找一种方法来制作大约 6-10 帧左右的动画。我希望能够让一颗星星飞起来并翻转，然后在按下按钮时回落。另外，就像我说的，当你按下按钮时，让按钮像枕头一样展开。也许其中一些教程可以做到这一点。但我还没有看到任何像我在 Flash 之外思考的东西。
-
您所说的某些内容可能需要 CSS3 动画。我没有看到你描述的确切内容，但这里有一些使用 CSS 动画的按钮：zurb.com/playground/radioactive-buttonswebrisorsa.info/animated-effects-on-buttons-with-pure-css3/362
-
感谢您的链接。第一个链接肯定越来越接近我正在寻找的东西。我想我可能已经知道我需要做什么了。我相信我需要的是两个不同的 gif 图像。一种是实体的，一种是动画的。然后我只需要在单击时使用 CSS3 或 javascript 在两者之间切换。所以基本上按钮开始是实心的，然后单击动画 gif 播放一次并返回到实心 gif 或第二个颜色不同的实心 gif，表明按钮已被点击。