任务三　个人网页中“照片的阴影”制作

任务三　个人网页中“照片的阴影”制作

任务要求

（1）打开文件2101.html，另存为2403.html。

（2）给“关于我”部分的照片添加阴影，实现方法为在照片盒子添加两个伪元素，定位在两边，通过倾斜，再调整图片层级。

效果如图24.3.1所示，其增加CSS部分如图24.3.2所示。

图24.3.1　照片的阴影效果

2D转换-照片阴影案例

图24.3.2　照片的阴影效果增加CSS部分

项目总结

本项目介绍了过渡属性、2D转换和动画的相关知识，并运用动画搭配2D转换的属性制作出CSS3中的动画特效，让静态的网页动了起来。通过学习，读者能熟练使用相关元素的过渡、平移、缩放、倾斜及旋转。

项目要求