在加载页面 CSS 图像变换平滑缩放（在页面加载时更改图像大小）[关闭]答案

【问题标题】：On load page CSS image transform scale smoothly (change image size on page load) [closed]在加载页面 CSS 图像变换平滑缩放（在页面加载时更改图像大小）[关闭]
【发布时间】：2013-08-28 05:53:19
【问题描述】：

这是我的link。当我单击并单击图标时，它会变得比其他图标更大，以提示您在哪个页面上。我需要它来平滑地转换比例（图标会平滑地变大）。

【问题讨论】：

请在此处发布您尝试完成此操作的相关代码部分。
我这样做是为了改变活动页面的图标大小其余链接具有原始宽度，在每个页面上我只是相应地添加图标的宽度大小
我是说在这里发布您的代码，StackOverflow 用于发布您拥有的代码的问题，问题应该包含需要帮助的代码
我需要活动链接突出，我在每个页面上分别增加图标大小
正如帕特里克所说，您需要发布您的尝试，我们可以从那里为您提供帮助。查看您的 html 时我要说的一件事是，您应该使用 display: inline-block; 将表格更改为分隔符，以便它们可以在较小的（移动）屏幕上重新排列/堆叠。

标签： css transform css-transitions scale transition

【解决方案1】：

这个 CSS 代码会做你想做的事：

.zoom {
    -webkit-transition:all 1s linear;
    -moz-transition:all 1s linear;
    -ms-transition:all 1s linear;
    -o-transition:all 1s linear;
    transition:all 1s linear;
}

.zoom:hover {
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -ms-transform:scale(1.5);
    -o-transform:scale(1.5);
    transform:scale(1.5);
}

【讨论】：

【解决方案2】：

#itemdisplay{
    width: 200px;
    height: 250px;
    border: 5px solid #fff;
    -webkit-transition: all .2s ease-in-out;
    background: #ff0;
}
#itemdisplay:hover{
    -webkit-transform: scale(1.1);
}

【讨论】：

【解决方案3】：

我使用 css 中使用的简单技术完成了此操作，将图标的宽度保留在相应页面上，然后添加 id。

<td id="zoom"><a href="visualization.html"><img src="image/bubble_plus3.png" width="150" /></a></td>

还有css：

#zoom img {
/*transform:scale 1s;
animation: scale 1s;*/
-moz-animation: scale 0.5s; /* Firefox */
-webkit-animation: scale 0.5s; /* Safari and Chrome */
-o-animation: scale 0.5s; /* Opera */
margin-top:-20px;}
@keyframes scale {
from {
    width:107px;
}
to {
    width:150px;
}}
@-moz-keyframes scale { /* Firefox */
from {
    width:107px;
}
to {
    width:150px;
}}
@-webkit-keyframes scale { /* Safari and Chrome */
from {
    width:107px;
}
to {
    width:150px;
}}
@-o-keyframes scale { /* Opera */
from {
    width:107px;
}
to {
    width:150px;
}}

【讨论】：