资源简介

教案名称 任务十 使用CSS3实现动画效果 计划学时 4学时
知识目标 掌握通过transition属性生成过渡动画的方法掌握通过transform属性生成2D和3D变形的方法掌握通过animation属性创建关键帧生成动画的方法
思政目标 培养学生的团队协作能力引导学生积极探索未知及工匠精神的养成培养学生不畏困难，勇往直前，做社会和国家合格接班人
教学重点 过渡、2D转换、3D转换、动画
教学难点 过渡、3D转换、动画
教学模式 教学做一体化线上+线下混合教学
教学活动及主要环节 思政元素切入点
第1学时（过渡属性）课前发布任务：观看学台相关学习视频。做课前测试题。I.学生讨论：（10分钟）传统的Web设计中，当网页中需要显示动画或特效时，需要使用JavaScript脚本或者Flash来实现。CSS3提供了强大的过渡属性，它可以在不使用Flash动画或者JavaScript脚本的情况下，为元素从一种样式转变为另一种样式时添加效果，例如渐显、渐弱、动画快慢等。那么，在CSS3中，过渡属性主要包括哪些呢？（学生回答，教师对问题进行讲解）CSS3中，过渡属性主要包括transition-property、transition-duration、transition-timing-function、transition-delay四种。transition-property 属性用于指定应用过渡效果的CSS属性的名称，其过渡效果通常在用户将指针移动到元素上时发生。transition-duration ( http: / / www..cn / cssref / pr_transition-duration.asp" \o "CSS3 transition-duration 属性 )属性用于定义过渡效果花费的时间。transition-timing-function属性规定过渡效果的速度曲线。transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。II.重难点内容讲授：（30分钟）transition-property属性（1）教师通过PPT对transition-property属性的概念及作用进行讲解，指出transition-property 属性用于指定应用过渡效果的CSS属性的名称。（2）教师transition-property属性的基本语法格式进行讲解，并进行代码演示。（3）教师对transition-property属性的三个常用属性值进行讲解，演示其具体用法和效果，通过对比分析不同属性值的异同。transition-property:none | all | property;（4）教师指出应用transition-property属性时需要注意的问题，并给予解答。（5）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。二、transition-duration属性（1）教师通过PPT对transition-duration属性的概念及作用进行讲解，指出transition-duration属性用于定义过渡效果花费的时间。（2）教师对transition-duration属性的基本语法格式进行讲解，并进行代码演示。（3）教师指出在设置过渡效果时，必须使用transition-duration属性设置过渡时间，否则不会产生过渡效果。（4）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。三、transition-timing-function属性（1）教师通过PPT对transition-timing-function属性的概念及作用进行讲解，指出transition-timing-function属性规定过渡效果的速度曲线。（2）教师对transition-timing-function属性的基本语法格式进行讲解，并进行代码演示。（3）教师对transition-timing-function属性的常用属性值进行讲解，演示其具体用法和效果，通过对比分析不同属性值的异同。（4）教师对比transition-timing-function属性不同属性值的产生过渡效果的速度曲线，并分析其异同。（5）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。四、transition-delay属性（1）教师通过PPT对transition-delay属性的概念及作用进行讲解，指出transition-delay属性规定过渡效果何时开始。（2）教师对transition-delay属性的基本语法格式进行讲解，并进行代码演示。（3）教师对比transition-delay属性设置的过渡效果，并分析说明。（4）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。五、transition属性（1）教师对transition属性的概念进行讲解，指出transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。（2）教师对transition属性的基本语法格式进行讲解，并进行代码演示。（3）教师对使用transition属性设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性进行讲解，并对比分析其优缺点。（4）教师指出应用transition属性时需要注意的问题，并给予解答。（5）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。【案例】在项目chapter10中新建一个网页文件，使用transition属性设置图像的过渡效果。（源码参考教材） 【案例】在项目chapter10中再新建一个网页文件，使用transition属性定义图片遮罩效果。（源码参考教材） III.课堂小结：（5分钟） 教师带领学生对本课时所学知识点进行回顾，使学生更熟练地掌握如何使用transition-property、transition-duration、transition-timing-function、transition-delay属性设置元素的过渡效果。课后作业1： 超星学台作业课后作业2：使用学台的教学视频自学任务10中的变形属性。第2学时（变形属性）课前发布任务：观看学台相关学习视频。做课前测试题。I.学生讨论：（10分钟）在CSS3之前，如果需要为页面设置变形效果，需要依赖于图片、Flash或JavaScript才能完成。CSS3出现后，通过transform属性就可以实现变形效果。那么，请同学们讨论：使用transform属性可以实现哪几种变形效果？ （学生回答，教师对问题进行讲解）答案：在CSS3中，使用transform属性可以实现变形效果，主要包括4种变形效果，分别是：平移、缩放、倾斜和旋转。使用translate()方法能够重新定义元素的坐标，实现平移的效果。使用scale()方法用于缩放元素大小。使用skew()方法能够让元素倾斜显示。使用rotate()方法能够旋转指定的元素对象，主要在二维空间内进行操作。II.重难点内容讲授：（30分钟）一、认识transform（1）教师通过PPT对CSS3 2D变形和3D变形产生的背景进行介绍。（2）教师对CSS3变形能够实现的功能和效果进行概述，并分析其优缺点。（3）教师对transform属性的基本语法进行讲解，并使用代码进行演示。（4）教师指出transform-function函数包括matrix()、translate()、scale()、rotate()和skew()等，并进行简单介绍。（5）学生练习，教师巡视，对疑难问题进行解答。二、2D转换 （1）教师指出使用transform属性可以实现2D转换，主要包括：平移、缩放、倾斜和旋转。（2）教师分别对translate()方法、scale()方法、skew()方法、rotate()方法的实现效果及基本语法格式进行讲解，并画出变形效果示意图。（3）教师分别对ranslate()方法、scale()方法、skew()方法、rotate()方法进行讲解，通过案例演示其具体用法和效果，并对比分析其变形效果的异同。（4）教师指出应用transform属性实现平移、缩放、倾斜和旋转时需要注意的问题，并给予解答。（5）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。三、3D转换（1）教师和学生互动：在上一知识点中，我们已经学习了2D转换，主要包括如何让元素在平面上进行顺时针或逆时针旋转。其实，在3D变形中可以让元素围绕X轴、Y轴、Z轴进行旋转，下面针对CSS3中的rotateX()、rotateY()函数进行具体讲解。（2）教师分别针对rotateX()、rotateY()、rotate3d()函数的基本语法格式及常见参数进行讲解，并就案例进行代码演示。（3）教师对比分析rotateX()、rotateY()、rotate3d()函数转换效果的异同，进行分析说明。（4）教师指出应用rotate3d()函数时需要注意的问题，并给予解答。（5）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。【案例】在项目chapter10中新建一个网页文件，使用transition属性和transform属性来实现淘宝衣服图片放大效果。（源码参考教材） 【案例】在项目chapter10中新建一个网页文件，盒子中放入两张图片，鼠标指针移动到图片上时，实现图片的翻转效果。（源码参考教材） III.课堂小结：（5分钟） 对本课时所学知识点进行回顾，使学生更熟练地掌握通过transform属性实现元素的移动、倾斜、缩放、翻转等变形效果。重点是2D转换、3D转换，易错点在于注意区分2D转换和3D转换的不同。课后作业1： 超星学台作业课后作业2：使用学台的教学视频自学任务10中的动画属性。第3学时（CSS3动画）课前发布任务：观看学台相关学习视频。做课前测试题。I.前课复习：（5分钟）通过以下问题，复习上节课内容在CSS3中，使用transform属性可以实现变形效果。下列选项中，能够实现元素缩放的函数是（ ）。A、translate（）方法;B、scale() 方法;C、skew()方法;D、rotate()方法;答案：B答案解析：scale() 方法用于缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例。元素尺寸的增加或减少，由定义的宽度（X 轴）和高度（Y 轴）参数控制。II.学生讨论：（5分钟）使用动画之前必须先定义关键帧，一个关键帧表示动画过程中的一个状态。在CSS3中，@keyframes规则用于创建动画。那么，同学们讨论下：如何使用@keyframes属性定义动画？（学生回答，教师对问题进行讲解）在CSS3中，@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐变为新样式的动画效果。@keyframes属性的语法格式如下：@keyframes animationname {keyframes-selector{css-styles;}}III.重难点内容讲授：（30分钟） 一、@keyframes——定义关键帧在上面的语法格式中，@keyframes属性包含的参数具体含义如下：animationname：表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。css-styles：定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空。例如，使用@keyframes属性可以定义一个淡入动画，示例代码如下：@keyframes 'appear'{ 0%{opacity:0;} /*动画开始时的状态，完全透明*/ 100%{opacity:1;} /*动画结束时的状态，完全不透明*/}（1）教师和学生互动：使用动画之前必须先定义关键帧，一个关键帧表示动画过程中的一个状态。在CSS3中，@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐变为新样式的动画效果。下面，将对@keyframes属性进行具体讲解。（2）教师通过PPT对@keyframes属性的概念及作用进行讲解，指出@keyframes规则用于创建动画。（3）教师对@keyframes属性的基本语法格式进行讲解，并进行代码演示。（4）教师对@keyframes属性包含的参数含义进行说明，并进行代码演示。（5）教师指出应用@keyframes属性时需要注意的问题，并给予解答。（6）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。二、animation-name（1）教师通过PPT对animation-name属性的概念及作用进行讲解，指出animation-name属性用于定义要应用的动画名称，为@keyframes动画规定名称。（2）教师对animation-name属性的基本语法格式进行讲解，并进行代码演示。（3）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。三、animation-duration（1）教师通过PPT对animation-duration属性的概念及作用进行讲解，指出animation-duration属性用于定义整个动画效果完成所需要的时间。（2）教师对animation-duration属性的基本语法格式进行讲解，并进行代码演示。（3）教师指出应用animation-duration属性时需要注意的问题，并给予解答。（4）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。四、animation-timing-function（1）教师通过PPT对animation-timing-function属性的概念及作用进行讲解，指出animation-timing-function用来规定动画的速度曲线，定义使用哪种方式来执行动画效果。（2）教师对animation-timing-function属性的基本语法格式进行讲解，并进行代码演示。（3）教师对animation-timing-function属性的常用属性值进行讲解，演示其具体用法和效果，通过对比分析不同属性值动画效果的异同。（4）教师指出应用animation-timing-function属性时需要注意的问题，并给予解答。（5）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。五、animation-delay（1）教师通过PPT对animation-delay属性的概念及作用进行讲解，指出animation-delay属性用于定义执行动画效果之前延迟的时间，即规定动画什么时候开始。（2）教师对animation-delay属性的基本语法格式进行讲解，并进行代码演示。（3）教师指出应用animation-delay属性时需要注意的问题，并给予解答。（4）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。六、animation-iteration-count（1）教师通过PPT对animation-iteration-count属性的概念及作用进行讲解，指出animation-iteration-count属性用于定义动画的播放次数。（2）教师对animation-iteration-count属性的基本语法格式进行讲解，并进行代码演示。（3）教师对animation-iteration-count属性的常用属性值进行讲解，演示其具体用法和效果，通过对比分析不同属性值动画效果的异同。（4）教师指出应用animation-iteration-count属性时需要注意的问题，并给予解答。（5）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。七、animation-direction（1）教师通过PPT对animation-direction属性的概念及作用进行讲解，指出animation-direction属性定义当前动画播放的方向。（2）教师对animation-iteration-count属性的基本语法格式进行讲解，并进行代码演示。（3）教师对animation-direction属性的常用属性值进行讲解，演示其具体用法和效果，通过对比分析不同属性值动画效果的异同。（4）教师指出应用animation-direction属性时需要注意的问题，并给予解答。（5）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。八、animation（1）教师对animation属性的概念进行讲解，指出animation属性是一个简写属性，用于在一个属性中设置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction六个动画属性。（2）教师对animation属性的基本语法格式进行讲解，并进行代码演示。（3）教师对使用animation属性同时设置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction六个动画属性进行讲解，并对比分析其优缺点。（4）教师指出应用animation属性时需要注意的问题，并给予解答。（5）学生一起操作，实现教学做一体化，加强学生对知识难点的理解。Ⅳ.课堂小结：（5分钟）对本课时所学知识点进行回顾，以此使学生更熟练地掌握如何使用animation相关属性定义不同的动画效果。重点是animation属性的用法。难点是注意区分animation相关属性的用法。课后作业1： 超星学台作业课后作业2：使用学台的教学视频自学任务10任务实现。第4学时（制作照片墙页面）课前发布任务：观看学台相关学习视频。做课前测试题。I.重难点内容讲授：（40分钟）【任务实现】：制作照片墙页面在项目chapter10中再新建一个网页文件，利用过渡和变形等属性实现照片墙效果，文件名为photos.html，在文件中首先添加照片，即搭建页面结构，然后给每张照片添加不一样的动画样式。一、搭建照片墙页面结构在页面中有6张图片，可以使用无序列表

来定义，每张图片放入一个列表项
• 中。打开新创建的文件photos.html，添加照片墙页面结构代码如下。（学生一起操作，实现教学做一体化，加强学生对知识难点的理解。）此时浏览网页效果，如下图。二、定义照片墙页面CSS样式搭建照片墙页面结构后，使用CSS内部样式表设置各元素样式，将该部分代码放入和标记之间，代码如下。 浏览网页，当鼠标指针移动到照片上时，呈现相应的动画效果。任务完成。说明：在操作演示时教师可适时停下来，让学生自行尝试。小组成员之间协作讨论，教师巡视，对疑难问题进行解答。II.课堂小结： （5分钟）照片墙页面，重点在利用过渡属性、变形属性制作过渡、变形等动画效果，掌握transition属性、transform属性的使用方法，是完成本任务的关键。课后作业1： 超星学台作业课后作业2：借助超星学习平台的教学视频进行线下自学。 分小组讨论过程中，培养学生团队合作，共同探讨的协作意识，培养同学们良好的沟通能力为以后进入工作岗位打下良好的基础。过渡属性的应用比较繁琐有一点难度，引导学生面对困难和琐碎的知识点，要更有耐心去学习，要有踏实勤奋的钻研精神。通过案例 实现，引导学生在“学中做”、“做中学”，把基础知识的学习和基本技能的掌握有机地结合在一起，从具体操作中培养应用能力。以变形效果在实际生活中的应用为例，提高自己的学习能力，不断适应知识的更新换代。对于难度稍高的任务，学生在实训过程中一定会碰到这样那样的困难，鼓励引导学生不要气馁，面对困难更要迎难而上。分组讨论培养同学们的团队协作意识，良好的沟通能力。学习的过程并不是照着老师的操作照猫画虎，而是真正学到自己身上。学习源码的过程就像是良好行为习惯养成的过程。在学习过程中去体会、感悟、内化，并外化成良好的行为习惯。动画属性的属性值设置非常精准，每一个参数都有明确的指向性，所以代码编写要精益求精，在代码的编辑中培养同学们的工匠精神。照片墙页面中设置的知识点极其细碎、繁琐，同学们需要不断尝试不同方法，查看不同表现效果，寻求最佳解决方案。中国的前端开发工程师们刻苦钻研、不怕困难不断取得突破得来，这种踏实勤奋的钻研精神，对我们有很大的学习意义。鼓励学生除了完成任务外，可以运用头脑风暴、发散思维，结合相关知识点，充分发挥自己的创新意识和主观能动性，实现更加丰富的网页效果。

  展开更多......

  收起↑