《网站前端技术》教案第16课CSS与CSS3（七）.docx
.f.1.3出嗤三一；户课题第16课CSS与CSS3（七）课时2课时(90min)教学目标知识技能目标：掌握CSS的2D/3D转换与动画控制素质目标：掌握CSS的相关知识，加深学生对网页制作的进一步了解，提升学生的知识储备教学重难点教学重点：2D或3D转换、动画控制教学难点：动画控制教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务一考勤（2min）一问题导入（5min）一传授新知（28min）一头脑风暴（IOmin）第2节课：问题导入（3min）一传授新知（27min）一上机操作（IOmin）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解2D/3D转换与动画控制的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题在CSS中，如何实现元素2D或3D的转换？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（28min）3.152D或3D转换【教师】讲解2D转换时，transform属性常用参数的应用【课堂互动】中【教师】提问实现元素2D或3D转换的主要属性是什么?通过教师讲解、课堂互动、演示操作等方式，使学生了解2D和3D转换时transform属性常用参数的应用在CSS中，用于实现元素2D或3D转换的属性主要是transform.利用该属性可以定义元素的移动、旋转、缩放或倾斜。其语法格式如下：transform:none|translate()|scale()|rotate()|skew();3.15.12D转换1 .平移参数translate参数作用：定义元素在水平和垂直两个方向的平移量。对于水平方向，向右平移为正，向左平移为负；对于垂直方向，向下平移为正，向上平移为负。应用格式：选择器IiransformKranslaie(IranslaieXjranslaieY):)选择器IransfornrtranslateX(IranslaleX);选择器transform:translateY(translaleY);选择器IransformKranslaieX(IranslaieX)translateY(IransIateY);【提示】(1)括号中translateXsIranslateY分别用于定义水平和垂直两个方向的平移量。(2)translate之后的括号中只有一个参数时，表示水平平移量。【示例3-15-1】编辑HTML文档<body>标签的内容，写入两个重售的盒子，代码如下：<divid="box'><divid="box2">2D转换<div><div>在<style>标签内写入CSS选择器：divwidth:300px;height:100px;background:red;color:#FFF;margin:l(X)px;.(详见教材)【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“平移效果”图片(详见教材)，并讲解效果:当鼠标指针悬停在蓝色盒子上时，蓝色的盒子用2s实现向右平移30px,向下平移30PXo2 .缩放参数scale【课堂互动】十【教师】提问缩放参数scale属性有什么作用？+【学生】聆听、思考、回答参数作用：定义元素在水平和垂直两个方向的缩放比例。应用格式：选择器(transform:SCale(SCaIeX.scaleY);)选择器Iransform:SCaIeX(SCaIeX);选择器(Iransform:SCaleY(SCaIeY);选择器(transform:SCaIeX(SCaIeX)scaleY(scaleY);【提示】(1)括号中的SCaIeX、ScaleY分别用于定义元素在X轴和Y轴方向的缩放倍数，参数可以是正数、负数和小数。大于1为放大；小于1为缩小。负数表示翻转。(3)如果scale之后的括号中只写一个参数，表示X轴和Y轴两个方向的值相同。【示例3-15-2将【示例3-15-1中的#box2:hover选择器声明改为以下代码：#box2:hovertransfonn:scaleX(-0.8)scaleY(0.5);)效果：当鼠标指针悬停在蓝色盒子上时，蓝色盒子用2s实现"以中心为基点，水平方向翻转并缩小至0.8倍，垂直方向缩放0.5倍"的2D转换。3 .旋转参数rotate参数作用：定义元素的旋转角度。应用格式：选择器(transform:rotate(angle);)【提示】(1)angle表示要旋转的角度，单位为deg正值为顺时针旋转，负值为逆时针旋转。(2)旋转轴心默认为图形中心。【示例3-15-3将【示例3-15-1中的#box2:hover选择器声明改为以下代码：#box2:hovertransfonn:rotate(30deg);)【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示"旋转效果”图片(详见教材)，并讲解效果：当鼠标指针悬停在篮色盒子上时，蓝色盒子以盒子中心为基点顺时针旋转30°。4 .倾斜参数skew参数作用：定义元素的倾斜角度。应用格式：选择器transform:SkeW(SkeWX,skewY);选择器transform:SkeWX(SkeWX);选择器(transform:skewY(skewY);)选择器(IransformskewX(SkewX)slewY(skewY);【提示】(1)括号中的SkewX和SkewY分别表示元素在X轴和Y轴方向上的倾斜角度,单位为deg。值可以是正值和负值，正值为逆时针方向,负值为顺时针方向。(2)如果在skew之后的括号中只写一个参数，表示X轴的倾斜角度。(3)默认轴心为图形中心。【示例"5-4】将【示例3-15-1中的#box2:hover选择器声明改为以下代码：#box2:hovertransform:skew(30deg,15deg):【教师】PPt展示“双向倾斜效果”图片(详见教材)，并讲解效果：当鼠标指针悬停在蓝色盒子上方时，蓝色盒子以盒子中心为基点水平倾斜30度,垂直倾斜15o【示例3/5-5】将【示例3/5.1】中的#box2:hover选择器声明改为以下代码：#box2:hovertransform:skewX(30deg);【教师】ppt展示“单向倾斜效果”图片(详见教材)，并讲解效果：当鼠标指针悬停在蓝色盒子上方时,蓝色盒子以盒子中心为基点水平倾斜30°。5 .21)转换基点属性transform-origin属性作用：定义缩放、旋转、倾斜的基点。属性格式：选择器transform-origin:X,Y;【提示】()x.Y默认值均为50%(2)X的值可以是left、right、center.长度和百分比。(3)Y的值可以是iopxbottom、Cenler、长度和百分比。【示例3-15-6】为【示例3-15-5中的#box2:hover选择器添加以下声明：transform-origin:Ieflbottom;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“transformorigin为左下角点的倾斜效果”图片(详见教材)，并讲解效果：当鼠标指针悬停在蓝色盒子上方时，蓝色盒子以盒子左下角点为基点水平(蝌30°。【学生】聆听、记录、理解3.15.23D转换【教师】讲解进行3D转换时，常用属性的应用3D变形是CSS3新增的样式，可以实现元素在三维空间的多种变形。1.31)透视距离perspective【课堂互动】十【教师】提问3D透视距离属性有什么作用?【学生】聆听、思考、回答属性名称：PerSPeCIive。属性作用：设置3D透视距离，单位一般为px进行3D转换元素的父元素具有该属性，才能在视觉上更直观地感受到3D转换。【示例3-15-7编辑HTML文档<body>标签的内容，在网页中布局两个重叠的盒子,以观察3D转换效果。代码如下：<divid="twx>><divid="box2',>3D转换vdiv><div>在<siyle>标签内写入CSS选择器：#box1（position:relative;height:150px:width:150px;margin:2（X）px;padding:!Opx;border:1xsolidblack;（详见教材）【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示"perspective属性设置旋转前后对比效果“未设置perspective属性旋转前后对比效果”图片（详见教材），并讲解效果：为父元素boxl设置了perspective属性，当鼠标指针悬停在box2上时，盒子围绕X轴旋转45°,并出现透视效果.若将代码中的perspective:150x属性删除，此时当鼠标悬停在box2上时，不能出现透视效果。2.透视中心perspective-origin【课堂互动】十【教师】提问透视中心perspective-origin属性有什么作用?【学生】聆听、思考、回答属性名称：perspective-origin.属性作用：定义3D元素的透视中心位置.应用格式：perspective-origin:x-axisy-axis;【提示】perspective-origin属性的默认值为“50%50%”。该属性必须与perspective属性一同使用，而且只影响3D转换元素。【示例3-15-8为【示例3-15-7中的的oxi选择器添加以下声明：perspective-origin:0%0%;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“设置透视中心旋转前后对比效果”图片（详见教材），并讲解效果：随着透视中心位置发生改变，同一旋转设置的视觉效果不同。通过头脑风暴的 形式，活跃课堂气 氛，引发学生思考， 培养学生的创新能 力和团队精神【学生】聆听、记录、理解头脑风暴（10 min）【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题，讨论如何使用本节课中介绍的2D转换。【学生】思考、讨论第二节课问题导入（3min）【教师】提出以下问题3D转换还包括哪些常用属性？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知（27min）3.15.23D转换【教师】讲解进行3D转换时，常用属性的应用3. 3D移动translate属性名称：transform.属性的值：lranslale3d（水平方向偏移距离,垂直方向偏移距离,垂直于屏幕方向偏移距离）；translateX（水平方向偏移距离）；translateY（垂直方向偏移距离）；translaieZ（垂直于屏幕方向偏移距离）。属性作用：实现3D转换的元素水平、垂直及垂直屏幕三个方向的偏移，其中水平和垂直方向同2D转换。垂直于屏幕方向偏移距离的视觉效果由透视距离和透视中心决定。【示例3-15-9】修改【示例3-15-7中知。乂2小（选择器的声明，代码如下：#box2:hovertransform:translateZ（-l00px）;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生迸行演示，演示完成后教师迸行点评【学生】聆听、上机操作、演示【教师】PPt展示XransIateZ设置前后效果对比”图片（详见教材），并讲解效果：当鼠标指针悬停在红盒子上方时，红盒子沿着图形中心且垂直于屏幕的Z轴向里移动100pxe4. 3D缩放scale【课堂互动】十【教师】提问3D缩放scale属性有哪些值？具有什么作用？十【学生】聆听、思考、回答属性名称nransfom通过教师讲解、课堂互动、演示操作等方式，使学生了解3D转换时常用属性的应用，以及动画控制的应用>»属性的值：SCale3d（水平方向缩放比例.垂直方向缩放比例.垂直于屏幕方向缩放比例）； SCaleX（水平方向缩放比例）；SCaIeY（垂直方向缩放比例）；SCaIeZ（垂直于屏幕方向缩放比例）。属性作用：实现3D转换的元素水平、垂直及垂直屏幕三个方向的缩放比例。其中水平 和垂直方向同2D转换；垂直方向因为视觉角度，不能看出缩放效果。5. 3D 旋转 rotate属性名称：Iransforme属性的值：rotate3d（x,y,z,angle）,前3个值表示绕X轴、Y轴、Z轴旋转矢量值*otateX（绕水平轴旋转的角度）；mateY（绕垂直轴旋转的角度）；EateZ（绕垂直于屏幕的轴旋转的角度）。属性作用：实现3D转换的元素绕三个不同的轴的旋转，其中绕垂直于屏幕的轴旋转同2D转换中的旋转。【示例3-15-10修改【示例3-15-7中粕。乂2由03选择器的声明，代码如下：#box2:hovertransformzrotateY（45deg）;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“rotateY属性设置前后效果对比”图片（详见教材），并讲解效果：当鼠标指针悬停在红盒子上方时，红盒子绕着中心Y¥啦造45。【示例3-15-11修改【示例3-15-7中粕0乂2由0勺选择器的声明，代码如下：#box2:hovertransfonrrotate3d（1,1,1,45deg）:【教师】PPt展示“rotate3D属性设置前后效果对比”图片（详见教材），并讲解效果：当鼠标指针悬停在红盒子上方时，红盒子绕着X、Y、Z轴各自旋转45。【学生】聆听、记录、理解3.16CSS动画控制【教师】讲解动画的变化规则及应用动画是CSS3中新增的属性，它可以替代一部分Flash或JavaScript定义的动画。创建CSS动画需要使用keyframes规则，在该规则中定义某CSS样式，就能创建由当前样式逐渐改变为新样式的动画。1 .16.1动画变化规则keyframes要定义CSS动画，需要先使用keyframes规则来声明关键帧。还需要为动画命名，便于后面引用。定义方法如下：方法1:keyframes动画名称from声明列表Ito（声明列表2【示例3-16/】编辑HTML文档<body>标签的内容，代码如下：<divid="box,><div>在<style>标签内写入CSS选择器：*box-sizing:border-box;#boxmargin:50px;width:200px;height:!OOpx;background:red;（详见教材）效果：页面中的#box背景色用5s由最初的红色变为蓝色，最后又快速变回红色方法2：(Sikeyframes动画名称0%声明列表125%声明列表2100%声明列表n【示例3-16-2将【示例3-16-1中动画aa的规则修改为以下代码：keyIYamesaa0%background:red;25%background:yellow:50%background:pink;75%background:blue;100%(background:black;效果：#boX的背景色用5s由最初的红色依次变为黄色、粉色、蓝色、黑色，最后快速变为2 .16.2动画的应用【课堂互动】十【教师】提问动画的应用涉及哪些属性？+【学生】聆听、思考、回答动画的应用涉及动画名称、花费时间、速度曲线、延迟时间、播放次数、轮流反向等属性。3 .动画名称animation-name属性名称：animation-name.属性的值：动画名称。属性作用：规定指定元素的动画名称，以便使用1丫3!讹5规则定义动画。4 .动画花费时间animation-duration属性名称：animation-duration.属性的值：动画花费时间。属性作用：规定指定元素完成动画的时间。5 .动画速度曲线animation-timing-function属性名称：animation-timing-function,属性的值：动画的速度曲线，值同过渡transition中的速度曲线属性取值。属性作用：规定指定元素完成动画时的速度变化。【示例3-16-3在【示例3-16-1的#4选择器中添加以下代码：animation-timing-funciton:ease-in-out;改变aa动画的规则声明：(Skeyframesaafromwidth:200px;towidth:800px;【学生】聆听、上机操作、演示效果：#box在5S之内以低速开始和结束播放aa动画，即宽度从200px变为800px,播放一次，播放完之后快速恢复宽度200px6 .动画开始前延迟时间animat沁n-dclay属性名称：animation-delay属性的值：动画开始前等待的时间。属性作用：规定指定元素完成动画前等待的时间。【示例3-16-4在【示例3-16-3的#除选择器中添加以下代码：animation-delay:2s;效果：力曦蝇2s后，#box在5s之内以彳璇海口W放aa动画，即200PX变为800PX,播放一次，播放完之后快速恢复宽度200px7 .动画播放次数animation-itcration-count属性名称：animation-iiera(ion-count属性的值：动画播放次数。属性的作用：规定指定元素播放动画的次数。【示例3-16-5在【示例3-16-4的#展选择器中添加以下代码：animation-iteration-count:4;效果：力哦痼2s后，#box在5s之内以彳璇海口1放aa动画，即200PX变为800PX,连续播放四次，播放完之后快速恢复宽度200px8 .轮流反向播放动画animation-direction属性名称：animation-direction,属性的值：alternate.动画播放允许轮流反向播放。属性作用：规定指定元素动画奇数次播放为正向播放，偶数次播放为反向播放。【示例3-16-6在【示例3-16-5的#box选择器中添加以下代码：animation-direction:alternate;效果：力哦页面后2s,#box在5s之内以彳氐速开始和结束播放aa动画，即宽度从200px变为800px,再从800px变为20PX,连续播放2次。9 .动画animation属性名称：animationo属性作用：动画的简写属性，用于设置六个动画属性。属性的值：anitnation-nameanimation-durationanination-timing-functionanimationdelayanimation-iteration-countanimation-direction,其中animalion-name和animation-duration属性为必须设置,否则时长为0,就不会播放动画了。其他属性可以缺省。应用格式：animation:namedurationtiming-functiondelayiteration-countdirection;【示例3-16-7将【示例3-16-6W#box选择器改写为以下代码：#boxmargin:50px;width:200px;height:100x;animation:aa 5s ease-in-out 2s 4 alternate;background:red;【学生】聆听、记录、理解上机操作(10min)【教师】组织学生分组讨论，上机完成以下任务在上节课创建的course.html文件中，将当鼠标指针悬停在第一个盒子上时，该盒子用2s实现向右平移20px,向下平移20PX,并出现透视效果；当鼠标指针悬停在第二个盒子上时，该盒子用2s实现"以中心为基点，水平方向翻转并缩小至0.5倍，垂直方向缩放0.4倍"的2D转换；当鼠标指针悬停在第三个盒子上时，该盒子以盒子中心为基点顺时针旋转30。，沿着图形中心且垂直于屏幕的Z轴向里移动100PX,背景色用5s由最初的红色依次变为黄色、粉色、蓝色、黑色，最后快速变为红色。【学生】讨论、上机操作通过上机操作巩固所学知识课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了2D和3D转换时transform属性的常用参数，以及CSS动画控制的相关内容，希望通过本节课的讲解，大家可以掌握2D和3D的转换方法，以及动画控制的具体应用，提升操俯支能。【学生】总结回顾知识点总结知识点，巩固学生对2D或3D转换、CSS动画控制等相关知识的印象作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题团队作业：围绕第一节课制定的主题项目，使用本节课所学的translate、scale,rotate,skewxtransform-origin属性进行设计，并形成文档上传至APP【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思本节课下来，发现学生的练习不够、强化不够，教师的检查不够。教学中，应多为学生安排一些练习时间，让学生在练习中体会、理解，在练习中总结、反思，从而才屎掌握所学知识。
