html - 如何实现，或者HTML5/CSS3是否支持图标挤压效果？

Question

我在看网页http://www.cuttherope.net在当前的 Google Chrome 38.0.x 上，看到页面中间有 4 个图标。当鼠标在它上面时，它有一个图标挤压效果:就好像图标是布丁或果冻被人用手挤压到一边，然后又弹回原来的大小。

我想知道它是如何完成的:它是由 HTML5/CSS3 完成的，还是其他方式完成的。我看到了这个 div

<div class="game-icon resize"></div>

如果我使用开发者工具在上面设置display: none，那么图标就会消失并且没有任何显示，所以这应该是显示的div效果，但是如果我检查计算值，我确实会看到一个图标作为背景，但是当鼠标悬停在它上面或离开它时，所有计算值都不会改变。这是如何完成的？它是 HTML5/CSS3 新功能的一部分吗？

(如果我禁用 JavaScript 并重新加载页面，效果仍然有效，显然这不是由 JavaScript 完成的)。

Answer 1

是的，这是CSS3特性的一部分(主要是transform)

如果你想有一个类似的效果而不必手动编码，看看这个: http://daneden.github.io/animate.css/

只需向元素添加两个类，您就可以轻松地为元素设置动画。