我想让我的图像高度增加到1500px(希望宽度只会自动重新调整大小,如果没有,我也可以轻松设置它)
我正在使用jquery .animate(),但它对我来说太过于波涛汹涌……
我知道我可以使用：
-webkit-transform: scale(2);
但是我希望它被设置为特定的大小..而不仅仅是图像大小的两倍或三倍.
有帮助吗？
谢谢
解决方法
您正在寻找webkit的-webkit-transition属性.这允许您指定两个单独的CSS规则(例如,两个类),然后指定切换这些规则时要应用的转换类型.
在这种情况下,您可以简单地定义开始和结束高度(我在下面的示例中同时执行了高度和宽度)以及为要转换的属性定义-webkit-transition-property,以及-webkit-transition-duration for持续时间：
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;
transition-duration: 1s;
background: red;
}
在Safari中测试过. Safari团队在CSS Visual Effects上也发布了相当不错的文章.
但是,我还建议再看一下jQuery,因为较新的CSS3内容与IE的版本不完全兼容.
