《网站前端技术》（梁玲）621-7 教案 第16课 CSS与CSS3（七）_第1页
《网站前端技术》（梁玲）621-7 教案 第16课 CSS与CSS3（七）_第2页
《网站前端技术》（梁玲）621-7 教案 第16课 CSS与CSS3（七）_第3页
《网站前端技术》（梁玲）621-7 教案 第16课 CSS与CSS3（七）_第4页
《网站前端技术》（梁玲）621-7 教案 第16课 CSS与CSS3（七）_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

课题第16课CSS与CSS3（七）课时2课时（90min）教学目标知识技能目标：掌握CSS的2D/3D转换与动画控制素质目标：掌握CSS的相关知识，加深学生对网页制作的进一步了解，提升学生的知识储备教学重难点教学重点：2D或3D转换、动画控制教学难点：动画控制教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂APP教学设计第1节课：→→→传授新知（28min）→头脑风暴（10min）第2节课：→传授新知（27min）→上机操作（10min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家了解2D/3D转换与动画控制的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题在CSS中，如何实现元素2D或3D的转换？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知

（28min）3.152D或3D转换【教师】讲解2D转换时，transform属性常用参数的应用【课堂互动】✈【教师】提问实现元素2D或3D转换的主要属性是什么？✈【学生】聆听、思考、回答在CSS中，用于实现元素2D或3D转换的属性主要是transform。利用该属性可以定义元素的移动、旋转、缩放或倾斜。其语法格式如下：transform:none|translate()|scale()|rotate()|skew();3.15.12D转换1.平移参数translate参数作用：定义元素在水平和垂直两个方向的平移量。对于水平方向，向右平移为正，向左平移为负；对于垂直方向，向下平移为正，向上平移为负。应用格式：选择器{transform:translate(translateX,translateY);}选择器{transform:translateX(translateX);}选择器{transform:translateY(translateY);}选择器{transform:translateX(translateX)translateY(translateY);}【提示】（1）括号中translateX、translateY分别用于定义水平和垂直两个方向的平移量。（2）translate之后的括号中只有一个参数时，表示水平平移量。【示例3-15-1】编辑HTML文档<body>标签的内容，写入两个重叠的盒子，代码如下：<divid="box1"> <divid="box2">2D转换</div></div>在<style>标签内写入CSS选择器：div{width:300px; height:100px; background:red; color:#FFF; margin:100px;……（详见教材）【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“平移效果”图片（详见教材），并讲解效果：当鼠标指针悬停在蓝色盒子上时，蓝色的盒子用2s实现向右平移30px，向下平移30px。2.缩放参数scale【课堂互动】✈【教师】提问缩放参数scale属性有什么作用？✈【学生】聆听、思考、回答参数作用：定义元素在水平和垂直两个方向的缩放比例。应用格式：选择器{transform:scale(scaleX,scaleY);}选择器{transform:scaleX(scaleX);}选择器{transform:scaleY(scaleY);}选择器{transform:scaleX(scaleX)scaleY(scaleY);}【提示】（1）括号中的scaleX、scaleY分别用于定义元素在X轴和Y轴方向的缩放倍数，参数可以是正数、负数和小数。大于1为放大；小于1为缩小。负数表示翻转。（3）如果scale之后的括号中只写一个参数，表示X轴和Y轴两个方向的值相同。【示例3-15-2】将【示例3-15-1】中的#box2:hover选择器声明改为以下代码：#box2:hover{transform: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:hover{transform:rotate(30deg);}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“旋转效果”图片（详见教材），并讲解效果：当鼠标指针悬停在篮色盒子上时，蓝色盒子以盒子中心为基点顺时针旋转30°。4.倾斜参数skew参数作用：定义元素的倾斜角度。应用格式：选择器{transform:skew(skewX,skewY);}选择器{transform:skewX(skewX);}选择器{transform:skewY(skewY);}选择器{transform:skewX(skewX)slewY(skewY);}【提示】（1）括号中的skewX和skewY分别表示元素在X轴和Y轴方向上的倾斜角度，单位为deg。值可以是正值和负值，正值为逆时针方向，负值为顺时针方向。（2）如果在skew之后的括号中只写一个参数，表示X轴的倾斜角度。（3）默认轴心为图形中心。【示例3-15-4】将【示例3-15-1】中的#box2:hover选择器声明改为以下代码：#box2:hover{transform:skew(30deg,15deg);}【教师】ppt展示“双向倾斜效果”图片（详见教材），并讲解效果：当鼠标指针悬停在蓝色盒子上方时，蓝色盒子以盒子中心为基点水平倾斜30度，垂直倾斜15°。【示例3-15-5】将【示例3-15-1】中的#box2:hover选择器声明改为以下代码：#box2:hover{transform:skewX(30deg);}【教师】ppt展示“单向倾斜效果”图片（详见教材），并讲解效果：当鼠标指针悬停在蓝色盒子上方时，蓝色盒子以盒子中心为基点水平倾斜30°。5.2D转换基点属性transform-origin属性作用：定义缩放、旋转、倾斜的基点。属性格式：选择器{transform-origin:X,Y;}【提示】（1）X、Y默认值均为50%。（2）X的值可以是left、right、center、长度和百分比。（3）Y的值可以是top、bottom、center、长度和百分比。【示例3-15-6】为【示例3-15-5】中的#box2:hover选择器添加以下声明：transform-origin:leftbottom;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“transform-origin为左下角点的倾斜效果”图片（详见教材），并讲解效果：。【学生】聆听、记录、理解3.15.23D转换【教师】讲解进行3D转换时，常用属性的应用3D变形是CSS3新增的样式，可以实现元素在三维空间的多种变形。1.3D透视距离perspective【课堂互动】✈【教师】提问3D透视距离属性有什么作用？✈【学生】聆听、思考、回答属性名称：perspective。属性作用：设置3D透视距离，单位一般为px。进行3D转换元素的父元素具有该属性，才能在视觉上更直观地感受到3D转换。【示例3-15-7】编辑HTML文档<body>标签的内容，在网页中布局两个重叠的盒子，以观察3D转换效果。代码如下：<divid="box1"> <divid="box2">3D转换</div></div>在<style>标签内写入CSS选择器：#box1{position:relative; height:150px; width:150px; margin:200px; padding:10px; border:1pxsolidblack;……（详见教材）【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“perspective属性设置旋转前后对比效果““未设置perspective属性旋转前后对比效果”图片（详见教材），并讲解效果：为父元素box1设置了perspective属性，当鼠标指针悬停在box2上时，盒子围绕x轴旋转45°，并出现透视效果。若将代码中的perspective:150px属性删除，此时当鼠标悬停在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】中的#box1选择器添加以下声明：perspective-origin:0%0%;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“设置透视中心旋转前后对比效果”图片（详见教材），并讲解效果：随着透视中心位置发生改变，同一旋转设置的视觉效果不同。【学生】聆听、记录、理解通过教师讲解、课堂互动、演示操作等方式，使学生了解2D和3D转换时transform属性常用参数的应用头脑风暴（10min）【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题，讨论如何使用本节课中介绍的2D转换。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课问题导入（3min）【教师】提出以下问题3D转换还包括哪些常用属性？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知

（27min）3.15.23D转换【教师】讲解进行3D转换时，常用属性的应用3.3D移动translate属性名称：transform。属性的值：translate3d(水平方向偏移距离,垂直方向偏移距离,垂直于屏幕方向偏移距离)；translateX(水平方向偏移距离)；translateY(垂直方向偏移距离)；translateZ(垂直于屏幕方向偏移距离)。属性作用：实现3D转换的元素水平、垂直及垂直屏幕三个方向的偏移，其中水平和垂直方向同2D转换。垂直于屏幕方向偏移距离的视觉效果由透视距离和透视中心决定。【示例3-15-9】修改【示例3-15-7】中#box2:hover选择器的声明，代码如下：#box2:hover{transform:translateZ(-100px);}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“translateZ设置前后效果对比”图片（详见教材），并讲解效果：4.3D缩放scale【课堂互动】✈【教师】提问3D缩放scale属性有哪些值？其有什么作用？✈【学生】聆听、思考、回答属性名称：transform。属性的值：scale3d(水平方向缩放比例,垂直方向缩放比例,垂直于屏幕方向缩放比例)；scaleX(水平方向缩放比例)；scaleY(垂直方向缩放比例)；scaleZ(垂直于屏幕方向缩放比例)。属性作用：实现3D转换的元素水平、垂直及垂直屏幕三个方向的缩放比例。其中水平和垂直方向同2D转换；垂直方向因为视觉角度，不能看出缩放效果。5.3D旋转rotate属性名称：transform。属性的值：rotate3d(x,y,z,angle)。前3个值表示绕X轴、Y轴、Z轴旋转矢量值；rotateX(绕水平轴旋转的角度)；rotateY(绕垂直轴旋转的角度)；rotateZ(绕垂直于屏幕的轴旋转的角度)。属性作用：实现3D转换的元素绕三个不同的轴的旋转，其中绕垂直于屏幕的轴旋转同2D转换中的旋转。【示例3-15-10】修改【示例3-15-7】中#box2:hover选择器的声明，代码如下：#box2:hover{transform:rotateY(45deg);}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“rotateY属性设置前后效果对比”图片（详见教材），并讲解效果：【示例3-15-11】修改【示例3-15-7】中#box2:hover选择器的声明，代码如下：#box2:hover{transform:rotate3d(1,1,1,45deg);}【教师】ppt展示“rotate3D属性设置前后效果对比”图片（详见教材），并讲解效果：当鼠标指针悬停在红盒子上方时，红盒子绕着X、Y、Z轴各自旋转45°。【学生】聆听、记录、理解3.16CSS动画控制【教师】讲解动画的变化规则及应用动画是CSS3中新增的属性，它可以替代一部分Flash或JavaScript定义的动画。创建CSS动画需要使用@keyframes规则，在该规则中定义某CSS样式，就能创建由当前样式逐渐改变为新样式的动画。3.16.1动画变化规则@keyframes要定义CSS动画，需要先使用@keyframes规则来声明关键帧。还需要为动画命名，便于后面引用。定义方法如下：方法1：@keyframes动画名称{from{声明列表1}to{声明列表2}}【示例3-16-1】编辑HTML文档<body>标签的内容，代码如下：<divid="box"></div>在<style>标签内写入CSS选择器：*{box-sizing:border-box;}#box{margin:50px; width:200px; height:100px; background:red;……（详见教材）效果：方法2：@keyframes动画名称{0%{声明列表1}}25%{声明列表2}……100%{声明列表n}}【示例3-16-2】将【示例3-16-1】中动画aa的规则修改为以下代码：@keyframesaa{ 0%{background:red;} 25%{background:yellow;} 50%{background:pink; 75%{background:blue;} 100%{background:black;}}效果：#box的背景色用5s由最初的红色依次变为黄色、粉色、蓝色、黑色，最后快速变为红色。3.16.2动画的应用【课堂互动】✈【教师】提问动画的应用涉及哪些属性？✈【学生】聆听、思考、回答动画的应用涉及动画名称、花费时间、速度曲线、延迟时间、播放次数、轮流反向等属性。1.动画名称animation-name属性名称：animation-name。属性的值：动画名称。属性作用：规定指定元素的动画名称，以便使用@keyframes规则定义动画。2.动画花费时间animation-duration属性名称：animation-duration。属性的值：动画花费时间。属性作用：规定指定元素完成动画的时间。3.动画速度曲线animation-timing-function属性名称：animation-timing-function。属性的值：动画的速度曲线，值同过渡transition中的速度曲线属性取值。属性作用：规定指定元素完成动画时的速度变化。【示例3-16-3】在【示例3-16-1】的#box选择器中添加以下代码：animation-timing-funciton:ease-in-out;改变aa动画的规则声明：@keyframesaa{ from{width:200px;} to{width:800px;}}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：#box在5s之内以低速开始和结束播放aa动画，即宽度从200px变为800px，播放一次，播放完之后快速恢复宽度200px。4.动画开始前延迟时间animation-delay属性名称：animation-delay。属性的值：动画开始前等待的时间。属性作用：规定指定元素完成动画前等待的时间。【示例3-16-4】在【示例3-16-3】的#box选择器中添加以下代码：animation-delay:2s;效果：变为800px，播放一次，播放完之后快速恢复宽度200px。5.动画播放次数animation-iteration-count属性名称：animation-iteration-count。属性的值：动画播放次数。属性的作用：规定指定元素播放动画的次数。【示例3-16-5】在【示例3-16-4】的#box选择器中添加以下代码：animation-iteration-count:4;效果：变为800px，连续播放四次，播放完之后快速恢复宽度200px。6.轮流反向播放动画animation-direction属性名称：animation-direction。属性的值：alternate。动画播放允许轮流反向播放。属性作用：规定指定元素动画奇数次播放为正向播放，偶数次播放为反向播放。【示例3-16-6】在【示例3-16-5】的#box选择器中添加以下代码：animation-direction:alternate;效果：变为800px，再从800px变为20px，连续播放2次。7.动画animation属性名称：animation。属性作用：动画的简写属性，用于设置六个动画属性。属性的值：animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction。其中animation-name和animation-duration属性为必须设置，否则时长为0，就不会播放动画了。其他属性可以缺省。应用格式：animation:namedurationtiming-functiondelayiteration-countdirection;【示例3-16-7】将【示

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论