jquery - 使用 jQuery 和/或 CSS 创建此应用程序演示视频中看到的按钮按下效果?

标签 jquery css animation button

http://youtu.be/sXqXpwyBI1k

请注意,当这个人按下大部分按钮时,按钮会迅速变为其自然颜色的较浅阴影,然后迅速变回其正常颜色,同时它的边框会动画化,就像有另一个元素按钮后面的边框会增加宽度和高度并淡出。

一段时间以来,我一直在尝试创建这种按钮按下效果......我有点烂......所以我想知道它是否可以用 jQuery 和/或 CSS 来完成,或者是否有人见过它在互联网上的某处完成或有示例?

当他输入一个新玩家的名字时会出现这种效果,请在该屏幕上观看。

最佳答案

[编辑] 我很好奇我是否可以在 css 中获得某种扩展边框,所以我将其添加到 fiddle 中

Draconis 的回答很好,jquery animate 可以很好地与较旧的浏览器一起使用,但是 css 转换会更平滑,所以如果您的目标是现代 safari、firefox 和 chrome,它们会很好用。这是一个动画按钮的小例子(这是悬停,而不是点击)

http://jsfiddle.net/dTqkK/2/

当然,两者的结合可能是最好的答案,使用像 Modernizr 这样的东西区分浏览器是否可以支持 css 转换,如果不能则回退到 javascript。

关于jquery - 使用 jQuery 和/或 CSS 创建此应用程序演示视频中看到的按钮按下效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9510457/

相关文章:

javascript - jQuery 如何根据单击的内容获取元素 ID 并获取子元素 ID

javascript - 如何动态添加谷歌地图信息窗口?

javascript - 包含ajax后加载js文件

html - 背景中的图像始终位于同一位置?

javascript - 如何在 Three.js 上创建带有 slider 的变形动画?

javascript - 修改dom节点属性,并保存这段HTML

jquery - 单击图像后居中缩放图像(JQuery)

php - 自定义 wordpress 25 主题 - 基本 PHP

iphone - 状态结束后如何获得旋转手势以继续旋转?

WPF-从下往上动画高度