HTML5+CSS3网页设计基础教程教学课件8.pptx

下载文档

77
0
约1.7万字
约 79页
2022-03-01 发布于广东
举报
版权申诉
保障服务

HTML5+CSS3网页设计基础教程教学课件8.pptx

1、本文档共79页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

HTML5+CSS3网页设计基础教程;;单元导读 CSS3有很强的制作动画的能力，即使不在网页上使用flash文件或JavaScript脚本，也可以在网页上展现类似的动画效果，使网页增色不少，本章将介绍三种类型的动画：transform变形动画、transition过渡动画、animation关键帧动画。;学习目标掌握transform 2D动画了解transform 3D动画掌握transition过渡动画掌握关键帧动画;思政目标由于flash动画在网页中使用的诸多缺点，现今网页中逐渐放弃了在页面中使用flash动画，HTML5已经可以利用CSS属性制作出精彩的动画效果，这就要求学生对代码的书写有着更深的功底，通过本章教育学生平时要勤动手、多动脑、多查阅资料、培养学生的自主学习能力，让其在学中做，做中学，扎扎实实的锻炼代码设计能力，进而丰富自己的想像力，创作出更优秀、更新颖的动画效果。 ;CSS动画能使网页看起来更加生动活泼，能起到非常好??修饰作用，很多简单类型的动画已经在网页制作中得到了广泛的应用，CSS3的动画类型基本可以分为三种：transform变形动画、transition过渡动画、animation关键帧动画。;transform的英文意义是“改变、转换”，在CSS中，可以理解为“变形”，通过transform属性，可以设置两种变形动画：transform2D变形动画（二维）和transform3D变形动画（三维）。;transform2D变形动画可以对元素进行平移（translate）、缩放（scale）、旋转（rotate）、倾斜（skew）等效果。平移动画：translate(x,y)，translate()是平移函数，参数指出元素在水平方向和垂直方向上的移动距离。;任务1. 平移动画的运用——制作平移的DIV，效果如图8-1、图8-2：;<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>平移动画</title> <style type="text/css"> #tl{ width:200px; height:120px; margin:5px; padding:20px; background:rgba(220,80,80,0.5); border:3px groove blue; } #tl:hover{ transform: translate(30px,30px); } </style> </head> <body> <div id="tl">平移</div> </body> </html> ;任务分析先为DIV设置宽高、背景色、边框等属性，使其可见，便于观察动画效果；要设置动画效果，需要配合伪类选择器:hover，使鼠标悬停在对象上时，出现变化效果； translate(30px,30px)使对象在水平方向向右和在垂直方向向下均平移30像素；;4.在实际应用中也可以只设置一个方向的偏移，使用属性translateX（x）可以单独设置水平方向的偏移，使用translateY（y）可以单独设置垂直方向的偏移； 5.括号中的x，y参数可以是正值，也可以是负值，如果是负值表示沿相反方向平移。缩放动画：缩放scale（x,y），scale ()是缩放函数，参数指出元素在水平方向和垂直方向上的缩放比例。;任务2. 缩放动画的运用——制作缩放的DIV，效果如图8-3、图8-4：;<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>缩放动画</title> <style type="text/css"> #sl{ width:200px; height:120px; margin:5px; padding:20px; background:rgba(220,80,80,0.5); border:3px groove blue; } #sl:hover{ transform: scale(0.6,1.4); } </style> </head> <body> <div id="sl">缩放</div> </body> </html> ;任务分析 scale(0.6,1.4)使对象的宽度在水平方向缩放为原来的0.6倍，使对象的高度缩放为原来