为 DIV 的上边缘设置动画答案

【问题标题】：Animate the top edge of a DIV为 DIV 的上边缘设置动画
【发布时间】：2011-03-30 05:30:31
【问题描述】：

我一直在寻找使用 jQuery 为 DIV 顶部边缘的宽度设置动画的解决方案。我想保持 DIV 的底部边缘（例如，100 像素 X 100 像素）相同，但减小顶部边缘的宽度。最终的形状将是梯形。有谁知道如何做到这一点？任何帮助表示赞赏。

【问题讨论】：

标签： jquery

【解决方案1】：

实际上，我想到了 2 种更好、更简单、更聪明的方法来做你想做的事。

这是一个使用一个 div 的示例： http://jsfiddle.net/reveries/ntgCL/

#box {
width: 200px;
height: 200px;
background: black;
position: relative;
}
#box:after, #box:before {
display: block;
content:"\0020";
color: transparent;
width: 211px;
height: 45px;
background: white;
position: absolute;
left: 1px;
bottom: -20px;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
}
#box:before {
bottom: auto;
top: -20px;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
}

以及使用两个 div 的第二个解决方案（我认为这里的控制更多）：http://jsfiddle.net/reveries/2gRMh/

#right {
width: 120px;
height: 200px;
background: black;
position: absolute;
left:130px;
transform:skew(-10deg,0deg);
-ms-transform:skew(-10deg,0deg); /* IE 9 */
-moz-transform:skew(-10deg,0deg); /* Firefox */
-webkit-transform:skew(-10deg,0deg); /* Safari and Chrome */
-o-transform:skew(-10deg,0deg); /* Opera */
}

#left {
width: 120px;
height: 200px;
background: black;
position: absolute;
left:200px;
transform:skew(10deg,0deg);
-ms-transform:skew(10deg,0deg); /* IE 9 */
-moz-transform:skew(10deg,0deg); /* Firefox */
-webkit-transform:skew(10deg,0deg); /* Safari and Chrome */
-o-transform:skew(10deg,0deg); /* Opera */
}

【讨论】：

【解决方案2】：

DIV 是块级元素。你不能像那样改变形状，除非你使用边框半径（即使那样我认为你不能让它成为梯形）或一些 CSS3 技巧（并非所有元素都支持）

以下是您可以使用的 CSS3 效果列表：http://www.css3.info/preview/

【讨论】：

感谢 JohnP。我将检查 CSS3 效果。

【解决方案3】：

从 adobe 获取边缘动画（免费）https://creative.adobe.com/ 你必须创建一个创意云帐户，然后转到应用程序，它是免费的完整程序。

观看一些教程并熟悉界面，然后下面的内容可能更有意义。

我做过的一件事（但在较慢的机器上加载需要一段时间）是预先渲染出一系列图像，您可以使用 Photoshop、Illustrator 甚至 3D 软件...然后如果您加载所有图像都进入边缘，您可以为每个图像设置不透明度动画，并缩小或放大时间线以控制帧速率。

这是一个例子：
http://www.reveriesrefined.com/myftp/door/

这个例子使用了 41 帧，但是为了将正方形变成梯形，你可能需要 5-10 帧（甚至更少）。

【讨论】：