css - 在加载页面 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);
}