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

《HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案10 《利用CSS3动画美化页面》.docx》由会员分享，可在线阅读，更多相关《HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案10 《利用CSS3动画美化页面》.docx（9页珍藏版）》请在优知文库上搜索。

1、教案20-20学年第学期课程名称：授课教师：职称：开课部门：教案首页课程名称授课专业班级授课教师职称部门课程类型学位课公共必修保口公共选修课口专业必修课素质拓展必修课口专业选修课口素质拓展选修课非学位课口公共必修课口公共选修课专业必修课口素版拓展必修课口专业选修课口素质拓展选修课课程性质口理论口实践。理论+实践考核方式回考试口考查课程教学总学时数64学分35学情分析大年纪的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过，*(操作系统、计算机原理、Ifhon编程、,语言编程等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识：并且在日常中大量使用电脑与手机等计算机设备

2、，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽取法教材名称(H1.K1.5KSS3b前端开发技术作者于丽娜出版社及出版时间人民邮电出版社2021.09弁考书目作者出版社及出版时间教研室意见教研室主任签字：年_一月一日注：表中口选项请打“J”每门课程只需填写一次本表.教案授课帙师班t学时6授课日期教学任务利用CSS3动画美化页面3授课方式Q讲授团实践授课地点团多媒体教室团实验/实训室口企业主要套考资科枚学PpT、做课、动画、思爰课程思政视频习题等呼图教学目标索质目标：1,培养学生团队合作精神;2,培

3、弊学生独立思考能力和岗位知识目标：1.了解transfo11n2D变形：2 .了解transition过波动画：3 .理解;Inimmi(Jn网页动C1.i实现上能力目标：1.熟练使用变形与过渡制作常见4 .挈握使用动劭制作简单的循环，政识。限的鼠标交互特效：悔效.帙学内容1. CSS3形变2. CSS3过渡3. CSS3动画.点*点教学亮点I1. CSS3形变2. CSS3过渡3. CSS3动画教学难点：1.CSS3动画教学方法谈论法、讲授法、演示法、练习法素材资*团文本素材0实物展示EPPT幻灯片口音频素材回觇频素材回动向素材0图形/图像索材口网络资源口其他课后作业任务一：总结提升任务二：

4、能力进阶帙学反思注：教案按授课次数填写,每次按课均应填写一份本表.重红班校课可不另填写教案.教学过程及内容注解(应包含注懑事项、课程思政点融入等一、导入斫课1的6分*】教师；通过前向如识的学习,可以制作出一个静态的页面，可是我们会在四页上看到忏很多图片或按钮会作照仃动诃的效果.在以往.这些效果都是设计仲依做动态图片、FIaSh或JaVasCria完成的,而CSS3将解决这问即，借助CSS3可以轻松Mi斜、缩放、自动及翻转元素，本单元我们使用2D变形里的位移、放转、纲放，CSS3过渡.以及CSS3如何实现动画效果.使用动画来为已完成的页面提高的视觉体脸.应用动曲样式将首页的静态大图一或个具有自动

5、交替变换背景图片轮播区域，为页面中的解态内容墙加米标互动效果，提升页面的友好度，希R通过反史优化修改页面的过程，提升精拄求精的工匠精神.二、新知识点、技能点饼解的X分仲新课讲解1：【约20分钟】教师：CSS3变形是一些效果的集合，如平移、旋轨、缩放、帧到效果，婚个效果都可以称为变形(transfbnn),它们可以操控元素发生.平移、旋转.缩放、假制等变化.这些效果在之仅都是需要依赖动态图片、Hash动劭，JavaScrip(才能完成的.现在可以使用纯CSS来实现变形而不需要这些额外的文件,再次提升了开发的效率,也提离了页面的执行效率.函数功能trans1.ate)2D平移函数.基于X-Y架标垂

6、新定位元素的位置.rotatc()2D旋转函数,在可见平面上对元素进行顺时针旋转，单位为度(deg)scaJc()2D缩放函数,对元累在X轴水平方向.Y轴方向迸行缩小放大.SkCWo2D帧斜函数,衣示元素沿着X(Y)轴方向帧辨ang1.cX(ang1.eY)角度MatrixO2D组台函数.格所有2D变形函数(旋转.缩放，移动及倾科)怛合在起.(案例演示)新课讲解2：【约15分钝】教师：上面的是兀素进行杉变，但是仍然还是舲态的，没有动起来.那么我们如何借助CSS让页面动起来？CSS3中过渡(IranSition)和animations两种方法都可以实现动画效果.transition呈现的是一种过

7、渡,是一种动幽转换的过程,如渐现、渐的、动画快慢等.Imnsiiion属性和CSS3其他属性样，离不开浏览器对它的支持，在早期使用时，需要带上各浏览器的前缀，不过在她虽然主流浏览器己经良好的支持过度了，但是最好还是养成添加浏览涔前缀的习惯.属性值(CSS样式)说明transition-property指定过渡或动态模拟的CSS旧性transitin-duration指定完成过渡所需要的时间.transidon-timing-iunction指定过渡函数“1.ransi(in-de1.ay指定过渡开始卅说的延迟时间。gnsiion声明设置所有过渡属性（案例演示）学生：（讨论分析）教师：总结下相对

8、定位的特点；设置相对定位的盒子会相对它原家的位置,通过指定儡移.到达新的位置.它对父殴盒子和相黜的盒子都没有任何影响.设置相对定位的盒子原来的位况会被保留下求。新课讲解3：【约15分钟】教师:绝对定位同时需要配合top、ICkbottom与right偏移量与参考依据来进行定位.与相对定位所不同的是，绝时定位的依据跄该定位元素的最近且具有定位周性的祖先元素。（案例演示）学生：（讨论分析）教师：使用了绝对定位的元素（笫二个盒子）以它最近的一个已经定位的“祖先”元素（Ma1.hcr）为基准进行偏移.绝对定位的元素从标准文档流中脱禺,这意味着它的对其他元素（第一个第一:个盒子）的定位不会造成影响.诳行

9、绝对定位的元素没彳I1没有指定宽高的话.在定位之后会有类似浮动的包裹特性，即元的宽高由内容的宽高决定。如果进行绝对定位的元素，找不到公近的己经定位的“祖先”元素，则将body元案作为定位的参考依据.这里的己定为指的是元素的定位置为re1.ative,abso1.ute或者fixed之一，通常是用re1.ative与abso1.ute进行如合使用，因为给参考元索仅仅添加相对定位屈性而不提供儡格属性的话，时与参考元泰没有任何影峭。回顾上面示例中过渡动画的过程.如果没有依标移入的效果去触发过渡,其实Mv是不会发生任何变化的.伪类hover是触发过渡机制中的一种.还有如下几种.触发类型说明伪类触发ho

10、ver、：active.:focus、:cheeked媒体连询可以通iimaha属性判断设传的尺寸，方向等。脚本触发HIJuvaScritX/木触发，新课讲解4：【约45分伸】教师：ff（血一节已经详细介绍使用CSS3的transition属性坡现一些过渡的动画效果.animation实现动画和transition实现动曲非常类似,祁是通过改变元素的屈性（ft来实现动同效果的.animation是通过关似Fk1.Sh动河的夫键帧来声明,个动画：花;mimation皿性中调用关键帧声明的动廊实现个更为女杂的动画效果，两个步骤完成的。在CSS3中把旧keyframes称为关键帧.做的机念.简单说就

11、是我们而到的动画并非连贯的的，而是在极小的时间间隔内，进行妥张图片的（帔）的依次切换得到的.也就是关设帧是加成动何的图片中的张，在CSS中这个关键帧还可以实现设置方段属性，而不是单一的起始与终止。kcyframes自定义组合名称fromI/*第一帧的CSS样式写在这里用）percentage（产时应百分比数的侬的CSS样式写在这里*/11。【/最后一帧CSS样式写在这里/）I代码中的keyframes用来将多个帧进行打包姐合以便可以直接商用.自定义的如合名称层可能语义化.方便代码阅读例加关于轮播图的一组关微像动画组合名设定为1001.kf在这个组合中可以使用from、10卜百分比小数的方式指定

12、过程中的帔数以及能个帧所对应的样式内容.from帧相当于0%惊，即动画的第帧，动Bi的起始状态；【。帧对应100%帧,即动画见后一帧，动画的结束状态。keyframes只是用来声明个动画,如果不通过CSS样式洪调用这个动画，是无任何效果的,因为这个时候我们仅仅定义了一套变化的过程，但是并没有结合时间的概念，让这个动画的过程与时间结合。ani三tion的调用诺法如下ranimation:animation-nancanimation-durationanination-timing-futionanimation-de1.ayanimation-iteration-countanimation-

13、directionanination-p1.ay-Maeanimation111.1.-mode;乂是这样H杂，我们来把它汉化一下：动质询用：动曲组合名动画砂揉时间动if1.i时间函数动划延迟时间按动M技术动面描放方向动Bi播放状态动画播放蔺后操作属性值说明aninu(i011*name动画i1.1.合名，要调用的动画i1.1.合名，由kcyframes定义Qunina1.i(Mi*duratin动疝持续时间，动画个完整过程的时间用时.anina1.i(x-(irnng*fuvdcx动届时间函数，通过时间函数进行动画过程中的速率设定.anina(ic11-de1.ay动面播放延迟,在动画捅放前

14、的等待时间按.anina1.i(Mi*i1.era1.ion*coun1.动Bi计数,设定动画的播放次数，默认值为1.可以设定为正整数非示对闷正俗数次数,或者infinite衣示无限循环.animation-direction动H播放方向.设定动曲是按照keyframes设定的顺序正序或者逆序播放.默认他.narma1.代表正序播放;a1.emae则表示逆序播放.anim1.ionp1.aysUte动向播放状态，提供给Javascripi进行动而播放状态的管理.设定值为rannng时进行播放:设定值为PaUsCd时留停.animation-fi1.1.-modc规定动画在播放之前或之后，其动i三效果是杳可见.对于时间函数,主要有以下的5中预设模式.动由时间函数假设值功能ease元案样式从初始状态过渡到终止状态时速度由快到悔，逐渐变悔（默认值），1.inear元素样式从初始状态过渡到终止状怎时速度ta速（匀速运动）。ease-in元素样式从初始状态过渡到终止状态时速度越来越快（渐显效果1.easeou1.元素样式从初始状态过渡到终止状态时速度越来越慢（渐险效果ease-in-i1.无索样式从初始状态过渡到终止状态时速度先加速再减速（渐显