本节讲解的这个动画效果，是免ｃｓｓ的。当鼠标进入指定的图片后，图片会一分为二向两侧运动；教程中使用了多个透明图层。制作这类模块，需要注意的几个问题： * 开门的图片是整张的，建议左右对称设计。 * 在布局工具里，可以在组件上单击右键调整组件的层次； * 位于开门组件下面的图层，是开门后显示的内容； * 位于开门组件上面的图层，不受开门动画的影响，是始终显示的； * 开门组件在一个模块中，只能创建一个； * 创建开门组件后，需要调节组件内开关区域的位置和尺寸；这个开关就是控制门的运动效果的； * 触发的方式有点击触发和鼠标经过触发；点击触发，就是鼠标点击开关区域，门会向两侧打开；经过触发，就是鼠标进入开关区域，门向两侧打开； * 门的动画方式有多种，可以在组件设置里调节； * 门的刷新间隔值越大，运动速度是越慢的； * 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) | | 备注说明 | 本教程中的布局文件，已分享到云端共享库。(可在布局工具上点导入——云端共享文件，选择“抢年货开门动画”) |