Web前端开发案例教程（HTML5+CSS3）课件 任务10制作校园照片墙页面.pptxVIP

;;制作照片墙页面，浏览效果如图10-1、10-2所示。;制作照片墙页面，具体要求如下。

（1）在页面中放入六张图片，图片大小240px*240px。鼠标指针移动到每张图片上时，显示不同的动画效果。

（2）鼠标指针移动到第一张图片上时，将图片变为圆形。

（3）鼠标指针移动到第二张图片上时，逆时针旋转60度。

（4）鼠标指针移动到第三张图片上时，顺时针旋转360度。

（5）鼠标指针移动到第四张图片上时，给照片添加阴影并且逆时针旋转10度。

（6）鼠标指针移动到第五张图片上时，产生3D变形、沿Y轴旋转180度。

（7）鼠标指针移动到第六张图片上时，将照片放大1.2倍。;10.2知识准备;10.2.1过渡属性;10.2.1过渡属性;10.2.1过渡属性;10.2.1过渡属性;10.2.1过渡属性;10.2.1过渡属性;10.2.1过渡属性;10.2.1过渡属性;10.2.1过渡属性;10.2.1过渡属性;10.2.2变形属性;10.2.2变形属性;10.2.2变形属性;10.2.2变形属性;10.2.2变形属性;10.2.2变形属性;10.2.2变形属性;10.2.2变形属性;10.2.2变形属性;10.2.2变形属性;10.2.2变形属性;10.2.2变形属性;10.2.2变形属性;10.2.2变形属性;10.2.2变形属性;10.2.2变形属性;10.2.2变形属性;10.2.2变形属性;10.2.2变形属性;10.2.2变形属性;10.2.3动画属性;10.2.3动画属性;10.2.3动画属性;10.2.3动画属性;10.2.3动画属性;10.2.3动画属性;10.2.3动画属性;10.2.3动画属性;10.2.3动画属性;10.3任务实现;10.3任务实现;任务小结;任务小结