0

受到Design Shack的启发，我想让一些可链接的照片在悬停时略微放大。但是，我希望动画居中，所以就像我们稍微放大了一点。

为了保持图像居中，我调整了 top、left、margin-top 和 margin-left 以使其工作。我什至不确定它是如何工作的 :-) 但它确实有效......

...除了动画实际上有点波涛汹涌和跳跃，至少在 Safari 中 - 最糟糕的是 10.9 版本的 Safari。（不过，Firefox 和 Chrome 做得更好。）

在此处查看示例：http: //jsfiddle.net/MnHVk/1/

重点：

.card img:hover {
    height:110%;
    width:110%;

    top:10%;
    left:-10%;
    margin-top:-10%;
    margin-left:5%;
}

将跳跃动画与不尝试居中的版本进行比较，此处：http: //jsfiddle.net/MnHVk/2/

谁能想到任何其他方式来制作不会导致这种跳跃效果的悬停动画？也许还有其他一些技术可以调整位置，以便当图像悬停在上面时，它可以平滑移动？

4

1 回答 1

2

如果你使用变换，它应该通过 GPU 渲染，我认为，顺利

.card img:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);

    -webkit-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    transform-origin:50% 50%;
}

更新的演示

于 2013-10-09T17:39:08.973 回答