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

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倍，使对象的高度缩放为原来的1.4倍，也就是说，如果参数大于1，就是放大，如果参数小于1，则缩小； scale()函数的参数也可以只有一个，表示水平和垂直的缩放程度相同；