《网站前端技术》教案第16课CSS与CSS3（七）.docx

《《网站前端技术》教案第16课CSS与CSS3（七）.docx》由会员分享，可在线阅读，更多相关《《网站前端技术》教案第16课CSS与CSS3（七）.docx（14页珍藏版）》请在优知文库上搜索。

1、.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）一作业布置（

2、2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解2D/3D转换与动画控制的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题在CSS中，如何实现元素2D或3D的转换？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（28mi

3、n）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参数作用：定义元素在水平和垂直两个方向的平移量。对于水平方

4、向，向右平移为正，向左平移为负；对于垂直方向，向下平移为正，向上平移为负。应用格式：选择器IiransformKranslaie(IranslaieXjranslaieY):)选择器IransfornrtranslateX(IranslaleX);选择器transform:translateY(translaleY);选择器IransformKranslaieX(IranslaieX)translateY(IransIateY);【提示】(1)括号中translateXsIranslateY分别用于定义水平和垂直两个方向的平移量。(2)translate之后的括号中只有一个参数时，表示水平平移

5、量。【示例3-15-1】编辑HTML文档标签的内容，写入两个重售的盒子，代码如下：2D转换在标签内写入CSS选择器：divwidth:300px;height:100px;background:red;color:#FFF;margin:l(X)px;.(详见教材)【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“平移效果”图片(详见教材)，并讲解效果:当鼠标指针悬停在蓝色盒子上时，蓝色的盒子用2s实现向右平移30px,向下平移30PXo2 .缩放参数scale【课堂互动】十【教师】提问缩放参数scal

6、e属性有什么作用？+【学生】聆听、思考、回答参数作用：定义元素在水平和垂直两个方向的缩放比例。应用格式：选择器(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轴两

7、个方向的值相同。【示例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-

8、15-1中的#box2:hover选择器声明改为以下代码：#box2:hovertransfonn:rotate(30deg);)【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示旋转效果”图片(详见教材)，并讲解效果：当鼠标指针悬停在篮色盒子上时，蓝色盒子以盒子中心为基点顺时针旋转30。4 .倾斜参数skew参数作用：定义元素的倾斜角度。应用格式：选择器transform:SkeW(SkeWX,skewY);选择器transform:SkeWX(SkeWX);选择器(transform:skewY(sk

9、ewY);)选择器(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展示“双向倾斜效果”图片(详见教材)，并讲解效果：当鼠标指针悬停在蓝色盒子上方时，蓝色盒

10、子以盒子中心为基点水平倾斜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

11、的值可以是iopxbottom、Cenler、长度和百分比。【示例3-15-6】为【示例3-15-5中的#box2:hover选择器添加以下声明：transform-origin:Ieflbottom;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“transformorigin为左下角点的倾斜效果”图片(详见教材)，并讲解效果：当鼠标指针悬停在蓝色盒子上方时，蓝色盒子以盒子左下角点为基点水平(蝌30。【学生】聆听、记录、理解3.15.23D转换【教师】讲解进行3D转换时，常用属性的应用3D变形是CS

12、S3新增的样式，可以实现元素在三维空间的多种变形。1.31)透视距离perspective【课堂互动】十【教师】提问3D透视距离属性有什么作用?【学生】聆听、思考、回答属性名称：PerSPeCIive。属性作用：设置3D透视距离，单位一般为px进行3D转换元素的父元素具有该属性，才能在视觉上更直观地感受到3D转换。【示例3-15-7编辑HTML文档标签的内容，在网页中布局两个重叠的盒子,以观察3D转换效果。代码如下：3D转换vdiv在标签内写入CSS选择器：#box1（position:relative;height:150px:width:150px;margin:2（X）px;paddin

13、g:!Opx;border:1xsolidblack;（详见教材）【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示perspective属性设置旋转前后对比效果“未设置perspective属性旋转前后对比效果”图片（详见教材），并讲解效果：为父元素boxl设置了perspective属性，当鼠标指针悬停在box2上时，盒子围绕X轴旋转45,并出现透视效果.若将代码中的perspective:150x属性删除，此时当鼠标悬停在box2上时，不能出现透视效果。2.透视中心perspective-origi

14、n【课堂互动】十【教师】提问透视中心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展示“设置透视中心旋转前后对比效果”图片（详见教材），并讲解效果：随着透视中心位置发生改变，同一旋转设置的视觉效果不同。通过头脑风暴的 形式，活跃课堂气 氛，引发学生思考， 培养学生的创新能 力和团队精神【