《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第19课 变形与过渡效果

1931第1931第课变形与过渡效果的基基本本PAGE121932119321变形与过渡效果第课PAGE13192912变形与过渡效果192912变形与过渡效果第课PAGE1

课题变形与过渡效果课时2课时（90min）教学目标知识技能目标：（1）了解变形和过渡属性（2）掌握使用CSS3设置2D和3D变形的方法（3）掌握使用CSS3设置过渡效果的方法思政育人目标：（1）培养学生一丝不苟，严谨、认真的工作态度（2）在学习中拓展自己的视野，开阔自己的眼界教学重难点教学重点：变形和过渡的相关属性教学难点：CSS3语言在网页中实现变形和过渡效果教学方法讲授法、启发法、问答法、演示法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：知识讲解（25min）第2节课：互动交流（4min）知识讲解（22min）

编写比赛（15min）

课堂小结（2min）作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课考勤

（2min）【教师】清点上课人数，记录好考勤【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况导入新知

（4min）【教师】通过类比，引出本节课内容在之前的学习中，其他编程语言可以实现变形和过渡效果，同样的，在HTML5网页中，也可以通过使用CSS3新增的知识实现变形和过渡的效果【学生】思考、发言【教师】总结学生发言使用CSS3新增的变形属性能够实现元素的平移、缩放与旋转等效果通过类比生活案例，让学生主动思考，如何网页中实现变形和过渡，引起学生的学习兴趣知识讲解

（25min）【教师】讲解变形属性变形属性在之前的CSS版本中，仅靠样式表文件无法制作变形效果，只能依赖于JavaScript脚本。在CSS3中，使用transform属性即可实现元素的平移、缩放与旋转等效果，具体格式为：transform:none|transform-functions;其中，none是默认值，表示无变形效果；transform-functions表示变形方法，可以设置多个，不同的变形方法用空格隔开。变形方法有如下几种。（1）translate()，平移方法，用于重新设置元素的位置。（2）scale()，缩放方法，用于改变元素的尺寸。（3）rotate()，旋转方法，用于使元素旋转一个角度。（4）skew()，倾斜方法，用于使元素倾斜一个角度。使用这些变形方法能够制作出元素的变形效果，下面分别对它们进行介绍。【教师】讲解设置2D变形的方法2D变形以元素中心为原点创建一个二维坐标系，如图10-1所示。沿坐标系中的x轴或y轴对元素进行调节产生的变形效果称为2D变形。图10-1以元素中心为原点创建二维坐标系1．平移translate()方法可以重新定义元素在二维坐标系中的坐标，实现平移变形，具体格式为：transform:translate(length-x,length-y);其中，length-x与length-y分别表示元素在x轴与y轴方向上移动的距离，参数值为数值与单位或者百分比，可以为负值。如果只设置一个参数值，则第二个参数值默认为0。【教师】演示【例10-1】操作流程，实现图10-2和10-3的效果平移变形的演示。（1）在DW中打开本书配套素材“项目10”→“translate.html”文档，该文档中已经创建好div元素，并设置了简单的样式，页面效果如图10-2所示。（2）在.d2{…}中添加以下代码，使子元素同时向x轴和y轴方向移动50px，页面效果如图10-3所示。transform:translate(50px,50px);图10-2子元素平移变形后的页面效果图10-3子元素平移变形前的页面效果2．缩放scale()方法能够使元素的宽度与高度按比例放大或缩小，实现缩放变形，具体格式为：transform:scale(times-x,times-y);其中，times-x与times-y分别表示元素宽度与高度的缩放倍数，参数值大于1表示按比例放大，参数值小于1则表示按比例缩小。如果只设置一个参数值，则表示同时设置宽度与高度的缩放比例。当参数值为负数时，会将元素翻转显示。例如，当times-x设置为负数时，缩放后的元素将以y轴为基准水平翻转。【教师】演示【例10-2】操作流程，实现图10-4和10-5的效果缩放变形的演示。（1）在DW中打开本书配套素材“项目10”→“scale.html”文档，该文档中有一个设置了边框样式的图像，页面效果如图10-4所示。（2）在img{…}中添加以下代码，使图像元素的宽度放大五分之一、高度缩小五分之一后再水平翻转，页面效果如图10-5所示。transform:scale(-1.2,0.8);图10-4图像元素缩放变形前的页面效果图10-5图像元素缩放变形后的页面效果3．旋转rotate()方法能够使元素以原点为中心顺时针或逆时针转动一定角度，实现旋转变形，具体格式为：transform:rotate(angle);其中，angle表示旋转的角度，如30deg。deg为角度的单位，表示度。当参数值为正值时，元素按顺时针旋转，反之则按逆时针旋转。【教师】演示【例10-3】操作流程，实现图10-6和10-7的效果（1）在DW中打开本书配套素材“项目10”→“rotate.html”文档，该文档中有一个设置了外边距的图像，页面效果如图10-6所示。（2）在img{…}中添加以下代码，使图像元素顺时针旋转45度，页面效果如图10-7所示。transform:rotate(45deg);图10-6图像元素旋转变形前的页面效果图10-7图像元素旋转变形后的页面效果4．倾斜skew()方法能够使元素以y轴或x轴为基准偏移一定角度，实现倾斜效果，如图10-8所示图10-8倾斜变形示意图具体格式为：transform:skew(angle-y,angle-x);其中，angle-y与angle-x分别表示元素相对于y轴与x轴的倾斜角度，设置方法与rotate()相同，但是不同的是，当参数值为正数时表示逆时针倾斜，反之表示顺时针倾斜。当只设置一个参数值时，第二个参数值默认为0。【教师】演示【例10-4】操作流程，实现图10-9与图10-10效果倾斜变形的演示。（1）在DW中打开本书配套素材“项目10”→“skew.html”文档，该文档中已经创建好div元素，并设置了简单的样式，页面效果如图10-9所示。（2）在div{…}中添加以下代码，使div元素相对y轴顺时针倾斜20度，页面效果如图10-10所示。transform:skew(-20deg);图10-9div元素倾斜变形前的页面效果图10-10div元素倾斜变形后的页面效果【学生】聆听、记录、思考【教师】讲解3D变形的设置方法3D变形以元素中心为原点，创建一个三维坐标系，如图10-11所示。沿坐标系中的x轴、y轴和z轴对元素进行调节产生的变形效果称为3D变形。图10-11以元素中心为原点创建三维坐标系3D变形需使用rotateX()、rotateY()与rotateZ()方法实现，具体格式为：transform:rotateX|rotateY|rotateZ(angle);其中，angle表示旋转的角度值，设置方法与rotate()相同。【教师】演示【例10-5】操作流程，实现图10-12与10-13的效果3D变形的演示。（1）在DW中打开本书配套素材“项目10”→“rotateX_Y.html”文档，该文档中创建了4个div元素，并设置了简单的样式，页面效果如图10-12所示。（2）在<style>标签中添加以下代码，使嵌套的两个div元素分别绕x轴与y轴旋转，页面效果如图10-13所示。.d2{transform:rotateX(45deg);} /*绕x轴顺时针旋转45度*/.d3{transform:rotateY(45deg);} /*绕y轴顺时针旋转45度*/图10-12div元素旋转变形前的页面效果图10-13div元素旋转变形后的页面效果【教师】提出问题，让学生思考2D变形和3D变形的各自优缺点在哪里呢？如何准确的判断出在哪种场合下使用2D变形，在何时使用3D变形【学生】思考、讨论、交流通过讲解知识点，让学生进一步了解网页中的变形效果的编写，为以后的学习打下基础课堂练习

（15min）【教师】布置课堂练习为“书店简介”页面导航条设置变形效果【教师】分析课堂练习内容本任务实施将通过为“书店简介”页面导航条设置变形效果，练习变形效果在实际网页制作中的应用在样式文档中的#head_nava:hover{…}内添加以下代码，设置当鼠标指针移动至导航条中超链接上时的变形效果transform:scale(1.3);/*设置鼠标指针移动至导航条中超链接上时，超链接元素放大至原大小的1.3倍*/【学生】完成课堂练习【教师】点名学生，讲解课堂练习【学生】讲解课堂练习题【教师】总结学生发言通过课堂练习，巩固理解本节课内容，加深学生对变形效果的理解交流讨论

（4min）【教师】安排组间讨论，设置讨论话题安排小组之间两两讨论，分析2D变形和3D变形各自的特点，以及二者的相同之处和不同之处【学生】完成小组讨论，记录讨论内容让学生有自我反省的意识，并且及时回顾学习的内容第二节课互动交流

（4min）【教师】概述网页中的过渡效果过渡效果能够使元素样式变化的过程更加平滑，通过人眼的视觉残留，给用户美观和直接的感受【学生】聆听、思考、讨论通过概述网页中的过渡效果，让学生了解掌握实现过渡方法的必要性知识讲解

（22min）【教师】讲解过渡效果相关属性1过渡效果相关属性使用CSS3提供的过渡功能，能够在不使用Flash与JavaScript的情况下实现元素样式从一个状态向另一个状态缓缓变化的过程。下面对CSS3中的过渡效果相关属性进行介绍。1．应用过渡效果在CSS3中，使用transition-property属性设置应用过渡效果的CSS属性名称，具体格式为：transition-property:none|all|property;其中，none是默认值，表示不应用过渡效果；all表示为所有属性应用过渡效果；property表示应用过渡效果的属性名称，可以设置多个属性。2．过渡时间在CSS3中，使用transition-duration属性设置过渡效果的变化时间，具体格式为：transition-duration:time;其中，time为过渡效果变化的总时间，默认值为0，单位一般为s（秒）或ms（毫秒）。如果不设置过渡时间，过渡效果将没有过渡的过程，直接显示结果。【教师】演示【例10-6】操作流程，实现图10-16效果过渡效果的演示。（1）在DW中打开本书配套素材“项目10”→“transition.html”文档，该文档中已经创建好div元素，并设置了简单的样式，页面效果如图10-16所示。（2）在div:hover{}中输入以下代码，设置当鼠标指针移动至div元素时为其添加圆角样式。border-radius:155px;（3）在div{…}中添加以下代码，为div元素从直角向圆角变化添加时长5秒的过渡效果。鼠标指针移动至div元素上时的页面效果如图10-17所示。transition-property:border-radius;transition-duration:5s;图10-16设置过渡前的页面效果图10-17圆角样式变化时的过渡效果3．过渡的速度曲线在CSS3中，使用transition-timing-function属性设置过渡效果的速度曲线，具体格式为：transition-timing-function:cubiczier(n,n,n,n)|liner|ease|

ease-in|ease-out;各属性值的说明如表10-1所示表10-1transition-timing-function属性值及其说明属性值说明贝塞尔曲线，用于精确设置过渡效果的速度曲线，n的取值范围为0～1linear匀速显示过渡效果，等同于cubiczier(0,0,1,1)ease默认值，（相对于匀速）慢速开始、先加速再减速至结束的过渡效果，等同于cubiczier(0.25,0.1,0.25,1)ease-in（相对于匀速）慢速开始再逐渐加速的过渡效果，等同于cubiczier(0.42,0,1,1)ease-out（相对于匀速）快速开始慢速结束的过渡效果，等同于cubiczier(0,0,0.58,1)ease-in-out（相对于匀速）慢速开始慢速结束的过渡效果，等同于cubiczier(0.42,0,0.58,1)4．延迟时间在CSS3中，使用transition-delay属性设置过渡效果开始之前需要等待的时间，具体格式为：transition-delay:time;设置方法与transition-duration属性相同，默认值为0，表示立即开始过渡效果；属性值为正数时，过渡效果将等待设置的时间之后开始；属性值为负数时，过渡效果会将该时间点之前的动作截断。例如，有一个时长为5秒的过渡效果A，A的变化过程可看作一个时长为5秒的动画片段，在此基础上设置延迟时间为−2秒，则表示当该过渡效果触发时，A将直接从第2秒开始播放直至结束（默认动画片段自第0秒开始播放）。【学生】聆听、思考、理解【教师】讲解常见过渡效果应用场景及触发方式过渡效果通过鼠标事件或元素样式改变触发，如单击按钮、鼠标指针移过等。下面介绍几种过渡效果的应用场景及其触发方式（1）使用:hover选择器设置样式，鼠标指针经过相应元素时将触发过渡效果（2）使用:active选择器设置样式，单击相应元素并按住鼠标左键时将触发过渡效果（3）使用:focus选择器设置样式，表单控件获得焦点时将触发过渡效果（4）使用:checked选择器设置样式，表单控件被选中时将触发过渡效果此外，媒体查询响应时也能够触发过渡效果。例如，以下代码表示当屏幕最大宽度为420px时，div元素的宽度变为100px，该过程应用时长为1秒的过