本節講解的這個動畫效果，是免ｃｓｓ的。當鼠標進入指定的圖片后，圖片會一分為二向兩側運動；教程中使用了多個透明圖層。制作這類模塊，需要注意的幾個問題： * 開門的圖片是整張的，建議左右對稱設計。 * 在布局工具里，可以在組件上單擊右鍵調整組件的層次； * 位于開門組件下面的圖層，是開門后顯示的內容； * 位于開門組件上面的圖層，不受開門動畫的影響，是始終顯示的； * 開門組件在一個模塊中，只能創建一個； * 創建開門組件后，需要調節組件內開關區域的位置和尺寸；這個開關就是控制門的運動效果的； * 觸發的方式有點擊觸發和鼠標經過觸發；點擊觸發，就是鼠標點擊開關區域，門會向兩側打開；經過觸發，就是鼠標進入開關區域，門向兩側打開； * 門的動畫方式有多種，可以在組件設置里調節； * 門的刷新間隔值越大，運動速度是越慢的； * z-index：是用來控制組件層次的。值越大，層次越高； | 在線播放 | [點我播放](http://cloud.video.taobao.com/play/u/1692908480/p/1/e/1/t/1/50000722703.swf) | | --- | --- | | 下載播放 | [點我下載](http://yunpan.taobao.com/s/NfhbasVWnR) (1920x1080P) | | 備注說明 | 本教程中的布局文件，已分享到云端共享庫。(可在布局工具上點導入——云端共享文件，選擇“搶年貨開門動畫”) |