css3动画/过渡/变换：如何使图像变大？

发布于 2024-09-17 06:12:03 字数 236 浏览 4 评论 0原文

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

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

-webkit-transform: scale(2);

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

有什么帮助吗？

谢谢

原文

I want to make my image grow to 1500px in height (and hopefully the width would just automatically re-size itself, if not, I could easily set it too)

I was using jquery .animate() but its just too choppy for my liking...
I know I can use the :

-webkit-transform: scale(2);

But I want it to be set to a specific size.. not just double or triple the image size.

Any help?

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怕倦 2024-09-24 06:12:03

您正在寻找 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 视觉效果。

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

You're looking for the -webkit-transition property for webkit. That allows you to specify two separate CSS rules (for instance, two classes) and then the type of transition to be applied when switching those rules.

In this case, you could simply define the start and end heights (I did both height and width in the example below) as well as defining -webkit-transition-property for the properties you want transitioned, and -webkit-transition-duration for the 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;
}

Tested in Safari. The Safari team also posted a pretty good write-up on CSS Visual Effects.

However, I would also recommend having another look at jQuery, as the newer CSS3 stuff won't be fully compatible with versions of IE.

回复收藏 0 原文

~没有更多了~