TweenMax-摺紙
阿新 • • 發佈：2018-11-22
// 1 摺紙
// 需求:
// 模擬紙片從摺疊到開啟的過程
// 提示:
// 1 佈局生成
// 通過for迴圈拼接 <div><div><div><div>...<div>
// 然後再拼上</div></div></div></div>...</div>
// 2 讓每個div都旋轉一定的角度 達到紙片摺疊的效果 set()
// 3 讓每個div逐個都恢復到旋轉值為0度的狀態 straggerTo()
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ margin: 0; padding: 0; width: 400px; height:50px; background: pink; border: 1px solid black; margin: 0 auto; margin-top: 50px; } </style> </head> <body> <script type="text/javascript" src="js/TweenMax.min.js" ></script> <script> var startHtml = '',endHtml=''; for(var i=0;i<10;i++){ startHtml+='<div>'; endHtml+='</div>'; } document.body.innerHTML = startHtml+endHtml; var t = new TimelineMax(); t.set('div',{ transformPerspective: 500, transformOrigin: "top" }) t.staggerTo('div',0,{ rotationX: -90, }) t.staggerTo('div',1,{ rotationX: 0, }) </script> </body> </html>