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

上传人:p** 文档编号:758125 上传时间:2024-02-26 格式:DOCX 页数:14 大小:273.70KB
下载 相关 举报
《网站前端技术》教案第16课CSS与CSS3(七).docx_第1页
第1页 / 共14页
《网站前端技术》教案第16课CSS与CSS3(七).docx_第2页
第2页 / 共14页
《网站前端技术》教案第16课CSS与CSS3(七).docx_第3页
第3页 / 共14页
《网站前端技术》教案第16课CSS与CSS3(七).docx_第4页
第4页 / 共14页
《网站前端技术》教案第16课CSS与CSS3(七).docx_第5页
第5页 / 共14页
《网站前端技术》教案第16课CSS与CSS3(七).docx_第6页
第6页 / 共14页
《网站前端技术》教案第16课CSS与CSS3(七).docx_第7页
第7页 / 共14页
《网站前端技术》教案第16课CSS与CSS3(七).docx_第8页
第8页 / 共14页
《网站前端技术》教案第16课CSS与CSS3(七).docx_第9页
第9页 / 共14页
《网站前端技术》教案第16课CSS与CSS3(七).docx_第10页
第10页 / 共14页
亲,该文档总共14页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述

《《网站前端技术》教案第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展示“设置透视中心旋转前后对比效果”图片(详见教材),并讲解效果:随着透视中心位置发生改变,同一旋转设置的视觉效果不同。通过头脑风暴的 形式,活跃课堂气 氛,引发学生思考, 培养学生的创新能 力和团队精神【

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > IT计算机 > Web服务

copyright@ 2008-2023 1wenmi网站版权所有

经营许可证编号:宁ICP备2022001189号-1

本站为文档C2C交易模式,即用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。第壹文秘仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知第壹文秘网,我们立即给予删除!