HTML5 CSS3Web前端开发技术（任务式）（微课版）（于丽娜第2版） 教案10 《利用CSS3动画美化页面》

《》教案20-20学年第学期课程名称：授课教师：职称：开课部门：年月日

《》教案首页课程名称授课专业班级授课教师职称部门课程类型学位课□公共必修课□专业必修课□素质拓展必修课□公共选修课□专业选修课□素质拓展选修课非学位课□公共必修课专业必修课□素质拓展必修课□公共选修课□专业选修课□素质拓展选修课课程性质□理论□实践理论+实践考核方式考试□考查课程教学总学时数64学分3.5学情分析大*年级的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过***（操作系统、计算机原理、Python编程、C语言编程）等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识；并且在日常中大量使用电脑与手机等计算机设备，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽象法教材名称《HTML5+CSS3Web前端开发技术》作者于丽娜出版社及出版时间人民邮电出版社2021.09参考书目作者出版社及出版时间教研室意见教研室主任签字：年月日注：表中□选项请打“√”。每门课程只需填写一次本表。

《》教案授课教师班级学时6授课日期教学任务《利用CSS3动画美化页面》授课方式讲授实践授课地点多媒体教室实验/实训室□企业主要参考资料教学PPT、微课、动画、思维导图课程思政视频习题等教学目标素质目标：1.培养学生团队合作精神；2.培养学生独立思考能力和岗位意识。知识目标：1.了解transform2D变形；了解transition过渡动画；理解animation网页动画实现过程；能力目标：1.熟练使用变形与过渡制作常见的鼠标交互特效；2.掌握使用动画制作简单的循环特效。教学内容CSS3形变CSS3过渡CSS3动画重点难点教学重点：CSS3形变CSS3过渡CSS3动画教学难点：CSS3动画教学方法谈论法、讲授法、演示法、练习法素材资源R文本素材R实物展示RPPT幻灯片□音频素材R视频素材R动画素材R图形/图像素材□网络资源□其他课后作业任务一：总结提升任务二：能力进阶教学反思注：教案按授课次数填写，每次授课均应填写一份本表。重复班授课可不另填写教案。 

教学过程及内容一、导入新课【约5分钟】教师：通过前面知识的学习，可以制作出一个静态的页面。可是我们会在网页上看到有很多图片或按钮会伴随有动画的效果。在以往，这些效果都是设计师依赖动态图片、Flash或JavaScript完成的。而CSS3将解决这一问题，借助CSS3可以轻松倾斜、缩放、移动及翻转元素。本单元我们使用2D变形里的位移、旋转、缩放，CSS3过渡，以及CSS3如何实现动画效果。使用动画来为已完成的页面提高的视觉体验。应用动画样式将首页的静态大图改造成一个具有自动交替变换背景图片轮播区域，为页面中的静态内容增加鼠标互动效果，提升页面的友好度，希望通过反复优化修改页面的过程，提升精益求精的工匠精神。二、新知识点、技能点讲解【约x分钟】新课讲解1：【约20分钟】教师：CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜效果，每个效果都可以称为变形（transform)，它们可以操控元素发生平移、旋转、缩放、倾斜等变化。这些效果在之前都是需要依赖动态图片、Flash动画、JavaScript才能完成的。现在可以使用纯CSS来实现变形而不需要这些额外的文件，再一次提升了开发的效率，也提高了页面的执行效率。......函数功能translate()2D平移函数，基于X-Y坐标重新定位元素的位置。rotate()2D旋转函数，在可见平面上对元素进行顺时针旋转，单位为度（deg）。scale()2D缩放函数，对元素在X轴水平方向，Y轴方向进行缩小放大。Skew()2D倾斜函数，表示元素沿着X(Y)轴方向倾斜angleX(angleY)角度Matrix()2D组合函数，将所有2D变形函数（旋转，缩放，移动及倾斜）组合在一起。（案例演示）新课讲解2：【约15分钟】教师：上面的是元素进行形变，但是仍然还是静态的，没有动起来。那么我们如何借助CSS让页面动起来？CSS3中过渡(transition)

和animations两种方法都可以实现动画效果。transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等。transition属性和CSS3其他属性一样，离不开浏览器对它的支持，在早期使用时，需要带上各浏览器的前缀，不过在线虽然主流浏览器已经良好的支持过度了，但是最好还是养成添加浏览器前缀的习惯。属性值（CSS样式）说明transition-property指定过渡或动态模拟的CSS属性transitin-duration指定完成过渡所需要的时间。transition-timing-function指定过渡函数。transition-delay指定过渡开始出现的延迟时间。transition声明设置所有过渡属性（案例演示）学生：（讨论分析）教师：总结下相对定位的特点：设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置。它对父级盒子和相邻的盒子都没有任何影响。设置相对定位的盒子原来的位置会被保留下来。新课讲解3：【约15分钟】教师：绝对定位同时需要配合top、left、bottom与right偏移量与参考依据来进行定位，与相对定位所不同的是，绝对定位的依据是该定位元素的最近且具有定位属性的祖先元素。（案例演示）学生：（讨论分析）教师：使用了绝对定位的元素(第二个盒子)以它最近的一个已经定位的“祖先”元素(#father)为基准进行偏移。绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素(第一个第三个盒子)的定位不会造成影响。进行绝对定位的元素没有没有指定宽高的话，在定位之后会有类似浮动的包裹特性，即元的宽高由内容的宽高决定。如果进行绝对定位的元素，找不到最近的已经定位的"祖先"元素，则将body元素作为定位的参考依据。这里的已定为指的是元素的定位置为relative、absolute或者fixed之一，通常是用relative与absolute进行组合使用，因为给参考元素仅仅添加相对定位属性而不提供偏移属性的话，对与参考元素没有任何影响。回顾上面示例中过渡动画的过程，如果没有鼠标移入的效果去触发过渡，其实div是不会发生任何变化的。伪类hover是触发过渡机制中的一种。还有如下几种。触发类型说明伪类触发hover、:active、:focus、:checked媒体查询可以通过@media属性判断设备的尺寸，方向等。脚本触发用JavaScript脚本触发。新课讲解4：【约45分钟】教师：前面一节已经详细介绍了使用CSS3的transition属性实现一些过渡的动画效果。animation

实现动画和transition实现动画非常类似，都是通过改变元素的属性值来实现动画效果的。animation是通过类似Flash动画的关键帧来声明一个动画；在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果，两个步骤完成的。在CSS3中把@keyframes

称为关键帧。帧的概念，简单说就是我们看到的动画并非连贯的的，而是在极小的时间间隔内，进行多张图片的（帧）的依次切换得到的。也就是关键帧是组成动画的图片中的一张。在CSS中这个关键帧还可以实现设置多段属性，而不是单一的起始与终止。@keyframes自定义组合名称{from{/*第一帧的CSS样式写在这里*/}percentage{/*对应百分比数的帧的CSS样式写在这里*/}to{/*最后一帧CSS样式写在这里*/}}代码中的keyframes用来将多个帧进行打包组合以便可以直接调用，自定义的组合名称尽可能语义化，方便代码阅读，例如关于轮播图的一组关键帧动画组合名设定为loop-kf。在这个组合中可以使用from{}、to{}、百分比小数{}的方式指定过程中的帧数以及每一个帧所对应的样式内容。from帧相当于0%帧，即动画的第一帧，动画的起始状态；to帧对应100%帧，即动画最后一帧，动画的结束状态。@keyframes只是用来声明一个动画。如果不通过CSS样式来调用这个动画，是无任何效果的。因为这个时候我们仅仅定义了一套变化的过程，但是并没有结合时间的概念，让这个动画的过程与时间结合。animation的调用语法如下：animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-mode;又是这样复杂，我们来把它汉化一下：动画调用：动画组合名动画持续时间动画时间函数动画延迟时间按动画技术动画播放方向动画播放状态动画播放前后操作属性值说明animation-name动画组合名，要调用的动画组合名，由@keyframes定义。animation-duration动画持续时间，动画一个完整过程的时间用时。animation-timing-function动画时间函数，通过时间函数进行动画过程中的速率设定。animation-delay动画播放延迟，在动画播放前的等待时间按。animation-iteration-count动画计数，设定动画的播放次数。默认值为1，可以设定为正整数表示对应正整数次数，或者infinite表示无限循环。animation-direction动画播放方向，设定动画是按照keyframes设定的顺序正序或者逆序播放。默认值，narmal代表正序播放；alternate则表示逆序播放。animation-play-state动画播放状态，提供给Javascript进行动画播放状态的管理。设定值为running时进行播放；设定值为paused时暂停。animation-fill-mode规定动画在播放之前或之后，其动画效果是否可见。对于时间函数，主要有以下的5中预设模式。动画时间函数预设值功能ease元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢(默认值)。linear元素样式从初始状态过渡到终止状态时速度恒速(匀速运动)。ease-in元素样式从初始状态过渡到终止状态时速度越来越快(渐显效果)。ease-out元素样式从初始状态过渡到终止状态时速度越来越慢(渐隐效果)。ease-in-out元素样式从初始状态过渡到终止状态时速度先加速再减速(渐显渐隐效果)。掌握了CSS3的过渡语法后，回忆一下前面示例中过渡动画的过程，如果没有鼠标移入的效果去触发过渡，其实div是不会发生任何变化的。伪类hover是触发过渡机制中的一种。还有哪些触发方法呢?这里总结了部分出发的方式。伪类触发：:hover、:active、:focus、:checked等。其中最常用的方式还是使用:hover实现。媒体查询:可以通过@media属性判断设备的尺寸，方向等。JavaScript触发:用JavaScript脚本触发。下面来总结下使用transition实现过渡动画的使用步骤:(1)在默认样式中声明元素的初始状态样式。(2)声明过渡元素最终状态样式，如悬浮状态。(3)在默认样式中通过添加过渡函数.添加一些不同的样式。新课讲解5：【约20分钟】教师：演示操作上机任务-制