我正在查看网页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 完成的)。
最佳答案
是的，这是CSS3功能的一部分(主要是transform)
如果您想获得类似的效果而无需手动编码，请看一下: http://daneden.github.io/animate.css/
只需向元素添加两个类，您就可以轻松地为元素设置动画。
关于html - 如何实现，或者HTML5/CSS3是否支持图标挤压效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26933647/