【问题标题】:Image animation : from a circle to a rectangle. (with corner.js)图像动画:从圆形到矩形。 (使用corner.js)
【发布时间】:2011-07-15 00:46:50
【问题描述】:

我正在使用the corner.js script by Dave Methvin。 它允许我在任何块元素上添加圆角。

目的是创建圆形的图像缩略图,点击后会变成完整的正方形格式。

这里是a demo of what i mean。可以查看源码,JS在底部。

我似乎无法为拐角的半径设置动画。他们只是从一个州到另一个州。我希望他们随着时间的推移顺利完成。

非常欢迎任何帮助:)

【问题讨论】:

    标签: javascript jquery jquery-animate rounded-corners


    【解决方案1】:

    corner.js 的工作方式是在块的角落添加一大堆额外元素。我会严重怀疑是否可以很好地制作动画。

    当然,您可以只使用 CSS border-radius 来制作圆角。这是符合标准的做法,而且非常容易制作动画,只需更改 CSS 属性的值即可。

    缺点是 IE8 或更低版本不支持 border-radius,但幸运的是,有一个名为 CSS3Pie 的 hack,它在 IE 的 CSS 中增加了对 border-radius(和其他功能)的支持,允许您可以在所有浏览器中为此使用标准 CSS。

    为此使用 CSS3Pie 也应该可以对其进行动画处理;我知道它确实支持动态更改样式,但我必须承认我实际上从未尝试过它,因为我从来不需要为我的圆角设置动画。

    希望对您有所帮助。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-08-15
      • 1970-01-01
      • 2014-09-07
      • 1970-01-01
      • 2017-10-08
      • 2014-12-12
      • 1970-01-01
      相关资源
      最近更新 更多