Question

我在一个简单的图库中收集了图像，我想在鼠标悬停时平滑地从小到大转换。我目前通过在鼠标结束时显示图像的实际大小但在不存在时将其强制为特定大小并使用display：none隐藏实际大小来实现此目的。

我希望在一段时间内包含一些webkit转换以改善转换。我理解webkit是在两个状态之间转换一个元素，但无论如何我都可以实现这一点。

我也想避免使用JavaScript。

.reveal a .preview { display: none; } .reveal a:hover .preview { display: block; position: absolute; z-index: 1; } .reveal img { background: #fff padding: 2px; vertical-align: top; width: 100px; height: 75px; } .reveal li { background: #eee; display: inline; float: left; margin: 3px; padding: 5px; position: relative; } .reveal .preview { border-color: #000; width: auto; height: auto; }

Answer 1

没有html（即jsfiddle），我很难在你的代码中插入解决方案..但这是一个通用的解决方案http://jsfiddle.net/9QVae/2/

img
{
    width:100px;
    height:100px;
    background:red;
    transition:width 1s, height 1s;
    -moz-transition:width 1s, height 1s, -moz-transform 1s; /* Firefox 4 */
    -webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */
    -o-transition:width 1s, height 1s, -o-transform 1s; /* Opera */
}

悬停时：

img:hover
{
    width:200px;
    height:200px;
}

所以trick是指定要添加效果的css属性（即宽度）然后指定事件的持续时间，即transition:width 1s;，然后在:hover选择器

下指定最终尺寸

注意： transition 不在IE上工作

如何通过webkit动画缩放图像

1 个答案: