HTML5+CSS3网页设计实战 教案 7.4 CSS过渡与动画-1

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。27.4CSS过渡与动画该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）理解CSS过渡与动画的意义。（2）掌握transition属性的书写格式，理解速度曲线过渡参数。（3）掌握@keyframes规则的创建与应用。能力目标：（1）具备使用css过渡完成级联菜单的交互效果的能力。（2）具备创建@keyframes规则完成级联菜单动态效果的能力。素养目标：（1）了解本章成语的出处，理解成语含义与知识点理解的结合。（2）鼓励学生使用@keyframes规则创建独特的动态效果，培养他们的创新意识和创造力。过渡效果和@keyframes规则的应用transition属性的应用，@keyframes规则的应用。讲解CSS过渡与动画的意义，演示动画效果，激发学生学习兴趣。速度曲线属性，@keyframes规则的定义。通过逐帧动画效果加强对@keyframes规则的认识。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习伪元素选择器在页面装饰上起到的意义。::before伪元素中，能否不写content属性，倘若无内容的情况先，应该如何设置content属性值？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入CSS过渡与动画在网页设计中扮演着至关重要的角色，它们为网页增添了动态效果，提升了用户体验，并使得网页界面更加生动和吸引人。CSS过渡的意义：可以在用户与网页进行交互时（如鼠标悬停、点击等）提供视觉上的反馈，使交互操作更加顺滑和自然。使用CSS过渡可以简化代码，因为过渡效果是通过CSS属性来控制的，而不需要使用JavaScript等编程语言来实现。CSS动画的意义：可以包含多个步骤和关键帧。这使得网页设计师能够制作出更加生动和有趣的用户界面。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授7.4.1过渡效果transition transition:属性过渡持续时间速度曲线延迟;但个别属性是不允许有过渡过程的，比如期待一个元素从不可见到慢慢可见，采用了display:none;状态转入display:block;，这实际是无法生效的。我们换一下思路，可以采用不透明度opacity:0;状态转入opacity:1;，或者采用位置偏移、增加父容器去响应等等的方式。1.速度曲线属性transition-timing-function2.延迟时间transition-delay听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。7.4.2@keyframes规则CSS3的‌@keyframes规则用于创建动画。允许你创建一个或多个关键帧，‌每个关键帧可以设置不同的样式，‌从而在动画过程中改变元素的样式。animation属性是一个简写属性，用于设置六个动画属性，最简洁的格式可以为：animation：keyframes规则的名称+动画一次所用时间+循环播放次数提问：为什么正方形在30%时间点上向右移动了400px，但是在本轮结束时能回到起点？换个角度思考，在0%时间点上，实际隐藏了一个什么属性？按上个问题思路，为什么正方形在本轮结束时与下一轮开始时，有个从圆形生硬切换到正方形的动画缺陷？听讲、回答问题教师演示案例10代码。任务实施【案例9】为如图7-23所示的子菜单出现过程设置过渡效果。（1）编写相应的HTML代码，如图7-24所示。（2）编写对应的CSS代码，如图7-25所示。（3）保存文件并预览网页，不断调整过渡时间、速度曲线以达到最优视觉效果。【案例11】打开“第7章过渡效果.html”，给子菜单添加下拉过程动画的效果。对应的HTML与CSS代码如图7-27所示。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构文件及文件夹命名及位置正确。10案例9Html结构正确，容器命名合理。20过渡效果相关属性正确，运行效果达到预期。20案例11Html结构正确，容器命名合理。20动画效果相关属性正确，关键帧状态定义合理，运行效果达到预期。30总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1）理解CSS过渡与动画的意义。（2）掌握transition属性的书写格式，理解速度曲线过渡参数。（3）掌握@keyframes规则的创建与应用。（4）使用css过渡，