任务二　个人网站—— 个人相册

任务二　个人网站—— 个人相册

任务要求

（1）之前1802.html个人网站中的相册使用两张图片通过显示与隐藏来制作。本次为节约图片加载时间，准备改变结构，运用CSS3缩放scale() 进行改进。打开1802.html，另存为2302.html。

（2）修改结构，每个列表中放入一张图片，如图23.2.1所示。

（3）样式改为当鼠标经过时，放大2倍显示。原有如图23.2.2所示样式部分替换为如图23.2.3所示代码，最终效果不变。

2D转换-相册2302案例优化

图23.2.1　个人网站相册结构HTML部分

图23.2.2　个人网站相册CSS原代码

图23.2.3　个人网站相册替换后CSS代码

项目总结

本项目介绍了2D转换的缩放相关知识，并运用动画搭配2D转换的缩放属性制作出CSS3中的动画特效，让静态的网页动了起来。