Web前端开发技术（AIGC版） 教案-教学设计 第7单元 客栈网页的遮罩效果制作（教案6：2 学时）.docx

教学设计

一、基本信息

课程名称

Web前端开发技术

课题名称

客栈网页的遮罩效果制作

授课班级

授课时间

授课类型

理实一体化课、新授课

授课地点

机房（有网络），依托超星教学平台

授课学时

40分钟*2学时

教材版本

《Web前端开发技术》（对应第七单元内容）

授课教师

待定

教学资源

超星教学平台网络课程、VSCode、Chrome浏览器、乡村客栈素材包、AIGC提示词模板、错误案例集

教材分析

本节选自教材第七单元7.2节，是CSS动画模块进阶内容，衔接上节照片墙交互效果，核心是CSS遮罩（opacity、background）与transition过渡的联动应用。通过乡村客栈首页