Question

我正在查看当前Google Chrome 38.0.x上的网页http://www.cuttherope.net，并看到页面中间有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/

只需向其中添加两个类，即可轻松为元素设置动画。

Answer 2

发现它！是的，它是CSS3，特别是[-webkit-]animation: resize 0.2s linear;属性。禁用该效果并停止效果。

Answer 3

我猜它会是这样的：

＆＃13;

img:hover {
    -webkit-animation: squeeze 0.5s;
    animation: squeeze 0.5s;
}

@-webkit-keyframes squeeze{
  0%   { transform: scale(1, 1); }
  50%  { transform: scale(1.1, 0.9); }
  100% { transform: scale(1, 1); }
}

@keyframes squeeze{
  0%   { transform: scale(1, 1); }
  50%  { transform: scale(1.1, 0.9); }
  100% { transform: scale(1, 1); }
}

＆＃13;

<img src="http://placehold.it/100x100">

＆＃13;

Answer 4

其他答案指出的CSS

.resize:hover {
    -webkit-animation: resize 0.2s linear;
    animation: resize 0.2s linear;
}

引用CSS中其他位置的以下关键帧动画

@-webkit-keyframes resize {
    0% { -webkit-transform:scale(1, 1) }
    50% { -webkit-transform:scale(1.1, 0.9) }
    100% { -webkit-transform:scale(1, 1) }
}

@keyframes resize {
    0% { transform:scale(1, 1) }
    50% { transform:scale(1.1, 0.9) }
    100% { transform:scale(1, 1) }
}

名称resize是将两者联系起来的 - 它不是关键字 - 您可以将其称为boing并使用

animation: boing 0.2s linear;
...
@keyframes boing {

等

关键帧说

在开头，缩放到100％x 100％
通过动画50％，缩放到110％x 90％
最后，缩小到100％x 100％

0.2s属性中的animation告诉它需要0.2秒才能完成整个动画。一旦应用了样式，动画就会开始，在这种情况下，当你悬停时。

如何实现，还是HTML5 / CSS3支持图标压缩效果？

4 个答案: