Question

我想让我的图像高度增加到1500px（希望宽度会自动重新调整大小，如果没有，我也可以轻松设置它）

我使用的是jquery .animate（），但它根本不适合我的喜好...... 我知道我可以使用：

-webkit-transform: scale(2);

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

任何帮助？

由于

Answer 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的版本不完全兼容。

css3动画/转换/转换：如何使图像增长？

1 个答案: