【问题标题】:css3 animation/transition/transform: How to make image grow?css3 动画/过渡/变换:如何使图像增长?
【发布时间】:2011-04-06 22:36:42
【问题描述】:

我想让我的图片高度增加到 1500 像素(希望宽度会自动调整大小,如果没有,我也可以轻松设置)

我使用的是 jquery .animate() 但它对我来说太不稳定了...... 我知道我可以使用:

-webkit-transform: scale(2);

但我希望将其设置为特定大小.. 不仅仅是图像大小的两倍或三倍。

有什么帮助吗?

谢谢

【问题讨论】:

  • jQuery 太不稳定?它几乎是您可以使用 javascript 获得的最快速度。您需要在什么浏览器上使用它?您在测试什么浏览器?

标签: animation resize css


【解决方案1】:

您正在寻找 webkit 的 -webkit-transition 属性。这允许您指定两个单独的 CSS 规则(例如,两个类),然后在切换这些规则时指定要应用的过渡类型。

在这种情况下,您可以简单地定义开始和结束高度(我在下面的示例中做了高度和宽度)以及为您想要的属性定义 -webkit-transition-property过渡,以及 -webkit-transition-duration 持续时间:

div {
    height: 200px;
    width: 200px;
    -webkit-transition-property: height, width;
    -webkit-transition-duration: 1s;
    -moz-transition-property: height, width;
    -moz-transition-duration: 1s;
    transition-property: height, width;
    transition-duration: 1s;
    background: red;
}

div:hover {
    width: 500px;
    height: 500px;
    -webkit-transition-property: height, width;
    -webkit-transition-duration: 1s;
    -moz-transition-property: height, width;
    -moz-transition-duration: 1s;
    transition-property: height, width;
    transition-duration: 1s;
    background: red;
}

在 Safari 中测试。 Safari 团队还在CSS Visual Effects 上发布了一篇不错的文章。

不过,我还建议您再看看 jQuery,因为较新的 CSS3 内容不会与 IE 版本完全兼容。

【讨论】:

    猜你喜欢
    • 2014-07-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-05-07
    • 1970-01-01
    相关资源
    最近更新 更多