css - 在加载页面 CSS 图像变换时平滑缩放(在页面加载时更改图像大小)

标签 css transform css-transitions scale transition

<分区>


关闭 8 年前

这是我的 link . 当我点击图标时,它会变得比其他图标更大,以提示您在哪个页面上。 我需要它来平滑地转换比例(图标平滑地变大)。

最佳答案

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

关于css - 在加载页面 CSS 图像变换时平滑缩放(在页面加载时更改图像大小),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18432312/

上一篇:css - 无法应用第一个和最后一个子 CSS

下一篇:html - 创建 div 100% 圆形

相关文章:

css - Android 版 Chrome 上的纯 CSS 视差滚动效果

javascript - 控制台上的 Angular Js "Uncaught Error: No module: uiCropper"错误

javascript - 让 iframe 元素滑入屏幕

ruby-on-rails - CSS、HTML : How can i make the div or <p> width dynamic as the text line increses/decreses

javascript - 如何让div在特定高度后淡入?

javascript - CSS 过渡 : Animating between inline styles for "height" style attribute

javascript - CSS transformX 和 dir rtl

ios - 如何旋转 CAShapeLayer 及其图案?

javascript - 使用 jquery 或 javascript 进行列表/网格/平铺 View 转换

slider 上的 jQuery 和 CSS3 转换