0

我正在尝试用 CSS 做一些我认为以前没有做过的事情。当鼠标悬停在 img 上时，我使用 CSS 使图像动画按比例放大（平滑地增长）。这是一个很好的效果，可以用来制作漂亮的作品集或很酷的菜单，比如苹果 OS X 扩展坞。但是，我最近看到一个网站将图像缩小，使其更小，然后显示文本，并认为这很棒。它使用 JavaScript 和 JQuery 的提示，但我想知道这是否可以单独在 CSS 中完成？下面是放大图像的代码：

a:hover, a:focus { 
    z-index:440 
}
a img {
    border:0;
    -webkit-transition:all .2s; 
    -moz-transition:all .2s;
}
ul.Port a img {
    -webkit-transform-origin: top;/
    -moz-transform-origin: top; 
}
a:hover img, a:focus img {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
}

如果我将值更改为负值，我会遇到 img 闪烁进出适当大小的问题，并且它不会平滑地缩放更小，但会被根除。我要求在 CSS 中做的事情是不可能的吗？还是我错过了什么？我已经玩了几个小时，但无法让它正常工作。

4

1 回答 1

1

解决方案：

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <style type="text/css">
            img {
                margin-top:50px;
                -webkit-transition:all .2s; 
                -moz-transition:all .2s;
            }
            img:hover {
                -webkit-transform: scale(1.5);
                -moz-transform: scale(1.5);
            }
        </style>
    </head>
    <body>
        <img src="top.png" alt="" />
    </body>
</html>
于 2013-05-21T19:17:37.883 回答