任务二 动态盒子蒙版

任务二 动态盒子蒙版

任务要求

(1)新建文件2202.html。

(2)创建一个400*290的盒子,背景为hezuo.jpg。

(3)要求当鼠标经过盒子时,图片颜色变深,从图上方、左边和右边分别出来文字、圆形和放大镜。

效果如图22.2.1所示,其CSS样式部分如图22.2.2所示,HTML结构部分如图22.2.3所示。

图22.2.1 动态盒子模板效果图

图22.2.2 动态盒子蒙版CSS样式部分

图22.2.3 动态盒子蒙版HTML结构部分