加载页面时CSS图像转换比例平滑(页面加载时更改图像大小)

Question

这是我的链接。当我点击图标时，它会变得比其他图标更大，以提示你在哪个页面上。我需要它平滑地变换比例（图标平滑地变大）。

Answer 1

我使用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;
}}

Answer 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);
}

Answer 3

此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);
}