Question

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

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

在加载页面CSS图像变换平滑（在页面加载时更改图像大小）

3 个答案: