Question

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

Answer 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 */
}

Answer 2

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

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

Answer 3

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

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

我做过的一件事（但需要一段时间来加载较慢的机器）是预渲染出一系列图像，你可以使用photoshop，插画，甚至是3D软件...然后如果加载将所有图像转换为边缘，您可以为每个图像设置不透明度的动画，并向下或向上缩放时间线以控制帧速率。

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

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

为DIV的上边缘设置动画

3 个答案: