项目9 CSS3高级特性教案31

附件教案课程名称：授课教师：适用专业：教学单位：信息工程学院编制时间：2026年2月天津滨海汽车工程职业学院授课教案首页授课班级：课程名称课程类型□理论☑理论+实践□实训总学时64授课地点周次16授课学时2教学目标（一）知识目标理解CSS3动画与过渡的核心区别，掌握CSS3动画的“定义-使用”两步法。掌握@keyframes关键帧规则的语法，能根据需求设置不同百分比的关键帧样式。熟练掌握animation简写属性的参数设置，了解各分解动画属性的使用场景。（二）技能目标能使用@keyframes定义多关键帧的复杂动画，实现元素的连续样式变化。能灵活设置animation属性的参数，实现动画的自动播放、无限循环、正反交替等效果。能独立完成企业客户案例页两大模块的HTML结构搭建和CSS样式编写，实现需求指定的所有动画效果。（三）素质目标培养项目开发思维，能根据项目需求拆解任务（结构搭建→样式设置→动画实现），按步骤完成开发。提升代码的可维护性和可读性，学会按模块编写CSS样式，添加清晰的注释。培养思政与技术融合的意识，能将技术应用于红色主题、公益主题的网页开发中，实现技术的社会价值。教学重点@keyframes关键帧规则的语法与多关键帧动画的定义。animation简写属性的参数设置（播放次数、播放方向、填充模式等）。企业客户案例页两大模块的HTML结构搭建和浮动布局实现。案例页中“卡片悬停上移+阴影+字体变色”“图片悬停放大”动画的实现。过渡、变形、动画三大特性的场景化组合应用。教学难点多关键帧动画的精准控制，不同百分比关键帧的样式衔接。animation-fill-mode填充模式的理解与实际应用。项目开发中浮动布局与动画效果的配合，避免布局错乱。图片放大动画的优化，通过overflow:hidden避免图片溢出容器。教材及教参《AI+网页前端开发企业级项目教程》版本978-7-5606-7987-1信息化资源PPT课件、学习通教学环节安排教学设计1.理实结合：以模块化任务为核心，知识点对应实操场景，避免纯理论讲解。2.三维目标：明确知识、技能、素质目标，自然融入思政元素。3.分层适配：设计基础、提高、拓展内容，适配不同学生水平。4.闭环反馈：遵循“讲解-实操-纠错-总结-复盘”逻辑，强化知识吸收。教学实施要求1.讲练结合：实操占比≥60%，以案例演示+自主实操为主。2.规范把控：强调语义化HTML、模块化CSS，注重代码细节与注释。3.问题导向：聚焦高频错误，精准突破教学难点。4.过程评价：结合课堂表现、作业质量、实操成果综合评价。教学后记课后练习完成教材对应习题拓展提高无教学反思教学内容与教学过程注释（一）巩固复习（5分钟）提问回顾上一课时核心知识点：过渡的简写属性语法？2D变形的平移、缩放、旋转函数的使用？transform-origin的作用？3D变形的前提条件是什么？实操小测试：让学生在VSCode中快速实现“div鼠标悬停时缩放1.2倍+平移10px，过渡时长0.3秒”，随机抽取2名学生展示代码，点评语法规范度。引出问题：“过渡只能实现从一个状态到另一个状态的变化，若想让元素自动播放连续的动画效果，该如何实现？”，为CSS3动画的讲解做好铺垫。（二）新课导入（5分钟）展示带有自动播放动画的网页效果：如标题的淡入淡出、元素的循环旋转、横幅的自动轮播等，提问：“这些自动播放的动画，能否用过渡实现？为什么？”总结答案：过渡是触发式动画，需元素状态变化；而CSS3动画是自主式动画，可自动播放、支持多状态变化，能实现更复杂的效果。引出课题：本节课将学习CSS3动画的核心属性，掌握多关键帧动画的定义与使用，然后通过企业客户案例页实战，综合运用过渡、变形、动画三大特性完成项目开发，最后进行国家安全教育思政主题实训，实现技术与思政的融合，明确本课时的三维教学目标。（三）新课讲授（55分钟）本环节采用理论讲解+案例实操+项目实战的模式，先讲解CSS3动画基础理论，再完成基础实操，最后带领学生完成企业案例页项目开发。模块1：CSS3动画属性（20分钟）动画与过渡的核心区别：通过表格对比，明确二者的触发方式、状态变化、使用场景差异，让学生学会技术选型。CSS3动画两步法：这是核心原则，贯穿本模块讲解。第一步：用@keyframes定义动画：讲解语法格式，0%（from）为起始状态，100%（to）为结束状态，可设置任意多百分比的关键帧，实操：定义一个“元素平移+变色+圆角变化”的三关键帧动画。第二步：用animation使用动画：讲解简写属性语法animation:动画名称持续时间速度曲线延迟时间播放次数播放方向填充模式;，逐一讲解参数，重点强调：必选参数：动画名称+持续时间；常用参数：infinite（无限循环）、alternate（正反交替）、forwards（保留结束状态）；实操：将上述定义的动画应用到div上，设置无限循环、正反交替、延迟0.5秒播放。分解动画属性讲解：简单讲解animation-name/animation-duration/animation-play-state等分解属性，了解即可，实操：用分解属性实现上述动画，对比与简写属性的差异。关键提醒：动画的样式变化可结合transform变形函数，实现更丰富的效果，实操：在动画中加入scale和rotate函数，实现元素“平移+缩放+旋转”的组合动画。模块2：企业客户案例页项目实战（35分钟）以“制作客户案例页的智能办公升级、赋能服务模块”为核心，分项目准备→结构搭建→样式编写→动画实现四步，带领学生分步开发，强调代码规范和模块划分。项目准备：在VSCode中创建项目文件夹CustomerCase，包含页面文件Case.html、资源目录images、样式文件css/Case.css，引入CSS初始化样式（清除内外边距、统一字体、去除链接下划线）。模块1：智能办公升级HTML结构搭建：使用figure+div搭建版心，a标签包裹图片、标题、描述，实现3个卡片的布局，强调语义化标签的使用。CSS样式编写：设置版心宽度1200px并居中，模块背景#eaeef6；卡片宽386px、高390px，背景白色，通过结构伪类选择器nth-child(3n-2)清除第一个卡片的左外边距，解决浮动布局的边距问题。动画实现：为卡片添加transition过渡属性，鼠标悬停时，通过translate3d(-2px,-2px,0)实现左上平移，添加box-shadow阴影效果，标题通过color和font-weight实现变蓝加粗。模块2：赋能服务HTML结构搭建：使用div搭建版心，no1类包裹图片和文字描述，实现3个图文卡片的布局。CSS样式编写：模块背景#fefeff，卡片宽390px、高167px，设置border-radius圆角和overflow:hidden（避免图片放大溢出）；文字绝对定位在图片底部，设置半透明背景和白色文字，实现遮罩效果。动画实现：为图片添加transition过渡属性，鼠标悬停时通过scale(1.2)实现放大效果，设置transform-origin:center让图片从中心放大。项目测试与调试：完成代码编写后，运行Case.html，测试所有鼠标悬停动画效果是否流畅，布局是否符合要求，带领学生排查常见问题（如图片溢出、边距错乱、动画无过渡）。（四）课程思政（10分钟）技术的实用性与价值性：CSS3动画技术的学习，最终目的是应用于实际项目开发中，如本节课的企业客户案例页，通过简单的动画效果提升了页面的专业度和用户体验。让学生理解技术源于实践，服务于实践，在学习中要注重理实结合，将所学知识转化为实际开发能力。家国情怀与技术担当：本节课的实训项目以“国家安全教育”为主题，让学生体会技术可以成为弘扬红色文化、传播正能量的载体。作为新时代的计算机专业学习者，不仅要掌握扎实的技术本领，更要树立家国情怀，将技术应用于国家建设、社会公益等领域，用技术讲好中国故事，承担起新时代的技术担当。创新设计与审美素养：网页动画的设计不仅需要技术，还需要审美——动画的时长、速度、效果要符合用户的视觉习惯，避免过度动画带来的视觉疲劳。让学生注重提升自身的审美素养，在开发中做到“技术与审美并存，实用与美观兼顾”，打造更优质的网页产品。团队协作与项目管理：实际的网页开发项目多为团队协作完成，本节课的项目开发是单人实操，但学生要树立团队协作意识，学会按模块划分任务、规范代码格式，便于团队成员之间的代码对接和维护，提升项目开发效率。总结与作业1.课堂总结梳理本课时核心知识点：CSS3动画的两步法、@keyframes关键帧规则、animation属性的参数设置、企业案例页两大模块的布局与动画实现、过渡/变形/动画三大特性的融合应用。强调重点：animation属性的常用参数（infinite/alternate/forwards）、案例页中overflow:hidden的使用、图片放大动画的中心缩放设置、结构伪类选择器解决边距问题。梳理知识体系：CSS3高级特性中，过渡实现简单的状态变化平滑效果，变形实现元素的位置/尺寸/角度变化，动画实现复杂的、自动播放的连续效果，三者可灵活组合，实现绝大部分网页交互动画。项目开发思路梳理：拿到项目需求后，先拆解任务（结构→样式→动画），再按步骤实现，最后进行测试调试，注重代码的规范和可维护性。2.作业布置分项目完善题和思政实训题，要求代码规范，按模块编写，添加详细注释，实训题需结合主题设计动画效果。项目完善题：完善本节课的企业客户案例页，要求：①为案例页添加标题，实现标题的淡入淡出自动动画；②为卡片添加鼠标悬停时的文字渐显效果；③优化动画效果，将过渡速度曲线设置为更贴合视觉体验的ease-out。思政实训题：完成“国家安全教育”主题网页的“英雄