爲DIV的頂部邊緣設置動畫

Question

我一直在尋找解決方案，使用jQuery爲DIV的頂部邊緣的寬度設置動畫效果。我想保持DIV的底部邊緣（例如100px X 100px）相同，但是會減小頂部邊緣的寬度。最終的形狀將是一個梯形。有誰知道這可以做到嗎？任何幫助表示讚賞。

Answer 1

DIV是塊級元素。除非你使用邊界半徑（即使我不認爲你可以把它變成梯形），或者一些CSS3技巧（所有元素都不支持），你不能改變這種形狀，除非你使用邊界半徑

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

Answer 2

從Adobe獲得邊緣動畫（免費）https://creative.adobe.com/您必須創建一個創意雲賬戶，然後轉到應用程序，這是免費的完整程序。

觀看一些教程並熟悉界面，那麼下面的內容可能會更有意義。

我做過的一件事（但需要一段時間才能加載到較慢的機器上）預先渲染出一系列圖像，您可以使用photoshop，illustrator，甚至3D軟件......然後如果你將所有圖像加載到邊緣，可以爲每個圖像設置不透明度的動畫效果，並向下或向上縮放時間軸以控制幀速率。

下面是一個例子：
http://www.reveriesrefined.com/myftp/door/

本例使用41幀，但是對於把一個正方形變成梯形，你可以逃脫也許5-10幀（甚至更少）。

Answer 3

其實，我想到了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 */ 
}