javascript - 如何使图像 "coming"成为前景

Question

我的目标是显示一张图片并将其慢慢带到前台(并在主要时间内延长)。我希望当我在 div/img 上检测到事件 onmouseover 时可以完成此操作。

目前，我使用隐藏属性，但我不喜欢它，因为它就像:出现/消失，没有过渡。

我希望有一个带有 CSS/CSS3 属性的解决方案可以做到这一点。但我没有找到。我尝试用动画做点什么。但几乎没有失败。

有人知道如何做这样的事情吗？我使用的是基本的 html/css/js，但我可以使用 bootstrap(如果它有好的解决方案)。

谢谢。

Answer 1

您可以使用 CSS 过渡和转换来实现这一点。您可以使用缩放功能。您可以通过以下方式获得所需内容:

http://jsfiddle.net/v2kHU/1/

img{
    transition: all 1s;
}

img:hover{
    -webkit-transform:scale(2);
    transform:scale(1.2);
}

编辑:

如果你想让它在开始时隐藏然后淡入和缩放，你可以玩不透明度:

http://jsfiddle.net/v2kHU/2/

img{
    transition: all 2s;
    opacity:0;
}

img:hover{
    -webkit-transform:scale(2);
    transform:scale(1.2);
    opacity:1;
}