任务9 运用特殊效果

任务9:运用特殊效果网页设计与制作(HTML+CSS+Javascript)网页设计与制作课程组目标TARGET知识目标掌握CSS3多列布局的方法；掌握CSS3常用的transform转换方法；掌握CSS3中transitions过渡的使用方法；掌握animation动画的使用方法。1任务描述2CSS3多列布局3CSS3转换transform4transitions过渡6综合实例7任务实施8任务拓展5animation动画1任务描述Part交通示意图动画效果本任务就是应用转换、过渡、动画等特殊效果，制作新生报到时从火车站到信息学院的交通示意动画效果。任务描述：交通示意图动画效果2CSS3多列布局Part◎认识columns多列布局◎columns的其他属性1认识columns多列布局columns是多列布局特性的基本属性，该属性可以同时定义每列的宽度和列数。语法：columns：column-width|column-count;语法中，column-width设置对象每列的宽度；column-count设置对象的列数。兼容性：IE10以上和Opera支持多列属性，Firefox需要前缀-moz-，Chrome和Safari需要前缀-webkit-。IE9以及更早的版本不支持多列属性。作用：columns适合应用在网页中需要显示大量文本时，建议分列，方便阅读。举例演示【实例9-1】多列布局columns的使用。2columns的其他属性column还包含其他的常用属性。属性名称语法含义column-width语法：column-width：length|auto;设置或检索对象每列的宽度。举例：column-width:300px;column-count语法：column-count：integer|auto;设置或检索对象的列数。举例：column-count:3;column-gap语法：column-gap：length|normal;设置或检索对象的列与列之间的间隙。举例：column-gap:normal;/*默认值*/column-gap:40px;column-rule语法：column-rule：[column-rule-width]|[column-rule-style]|[column-rule-color];设置或检索对象的列与列之间的边框。复合属性，相当于border属性。举例：column-rule:1pxsolid#999;column-span语法：column-span：none|all;设置或检索对象元素是否横跨所有列。举例：column-span:all;还有column-fill、column-break-before、column-break-after、column-break-inside等几个属性。举例演示【实例9-2】多列布局columns举例。3CSS3转换Part◎transform转换简介◎常用的transform变形方法◎运用3D变形1transform转换简介在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动等变形处理，结合即将学习的过渡和动画属性产生一些新的动画效果。语法：transform：none|transform-function；默认值为none，适用于内联元素和块元素，表示不进行变形transform-function用于设置变形函数，可以是一个或多个变形函数列表。函数名称含义translate()移动元素对象，即基于X和Y坐标重新定位元素。scale()缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数、负数和小数。rotate()旋转元素对象，取值为一个度数值。skew()倾斜元素对象，取值为一个度数值。matrix()定义矩形变换，即基于X和Y坐标重新定位元素的位置。兼容性：IE10、Firefox、Opera支持transition属性。Chrome和Safari需要前缀-webkit-，IE9需要前缀-ms-。2常用的transform变形方法1.移动方法translate()在CSS3中，使用translate()方法来实现图像或文字的移动。语法：transform:translate(x,y);x指元素在水平方向上移动的距离，y指元素在垂直方向上移动的距离。当使用一个参数时表示X轴上移动的距离，x和y可以为负值，表示反方向移动元素。举例演示【实例9-3】translate移动变形的使用。初始div元素的状态运用translate移动后的页面效果2.缩放方法scale()在CSS3中，使用scale()方法来实现图像或文字的缩放。语法：transform:scale(x,y);语法中，x指元素宽度的缩放比例，y指元素高度的缩放比例。x和y的取值可以是大于1的正数、负数和小数。大于1正数表示放大，负数值不会缩小元素，而是翻转元素，然后再缩放元素。当使用一个参数时表示x和y的缩放比例相同。举例演示【实例9-4】scale缩放变形的使用。3旋转方法rotate()在CSS3中，使用rotate()方法来实现图像或文字的旋转。语法：transform:rotate(angle);angle指元素旋转的角度值，如果角度为正数值，则按照顺时针进行旋转，负值时，按照逆时针旋转。举例演示【实例9-5】rotate缩放变形的使用。4斜切方法skew()在CSS3中，使用skew()方法来实现图像或文字的倾斜显示。语法：transform:skew(x-angle,y-angle);语法中，x-angle表示相对于X轴进行倾斜角度值，y-angle表示相对于Y轴进行倾斜角度值，X轴逆时针转为正；Y轴顺时针转为正。举例演示【实例9-6】scale缩放变形的使用。5更改变换的中心点transform-origin在CSS3中，transform属性平移、缩放、倾斜及旋转等效果，针对的元素默认都是以元素的正中心为中心点的，如果需要改变这个中心点，可以使用transform-origin属性。语法：transform-origin:xyz;transform-origin:lefttop；transform-origin:50%50%；语法中，x,y,z的默认值为50%、50%、0，这表示元素的中心。x表示视图被置于X轴的何处，可取值有left、center、right、length，也可以使用“%”；y表示视图被置于Y轴的何处，可取值有top、center、bottom、length，也可以使用“%”；z表示被置于Z轴的何处，主要使用length。举例演示【实例9-7】transform综合应用与中心点的变换。初始div元素的状态transform综合应用与中心点的变换效果3运用3D变形1.认识三维空间3D变形中可以让元素围绕X軸、Y轴、Z轴进行旋转。要想深入的理解3D变形，需要理解三维空间示意图，如图所示。三维坐标系示意图1.认识三维空间要想呈现立体透视的效果，必须perspective属性，它是透视，视角的意思。比方说，一个1280像素宽的显示器中有张图片，应用了3Dtransform，同时，该元素或该元素父辈元素设置的perspective大小为1920像素。则这张图片多呈现的3D效果就跟浏览者本人在1.5个显示器宽度的地方(1280*1.5=1920)看到的真实效果一致！透视示意图1.认识三维空间要想呈现立体透视的效果，必须perspective属性，它是透视，视角的意思。比方说，一个1280像素宽的显示器中有张图片，应用了3Dtransform，同时，该元素或该元素父辈元素设置的perspective大小为1920像素。则这张图片多呈现的3D效果就跟浏览者本人在1.5个显示器宽度的地方(1280*1.5=1920)看到的真实效果一致！透视示意图2.rotateX()、rotateY()、rotateZ()函数语法：transform:rotateX(angle);3D变形常用的函数包括rotateX()、rotateY()、rotateZ()，元素在3D空间旋转的角度，如果其值为正，元素顺时针旋转，反之元素逆时针旋转。rotateX()函数用于指定元素围绕X轴旋转。语法：transform:rotateX(angle);rotateY()函数用于指定元素围绕Y轴旋转。语法：transform:rotateZ(angle);rotateZ()函数用于指定元素围绕Z轴旋转。举例演示【实例9-8】3D转换的效果。rotateX(30deg)在谷歌Chrome或者Firefox浏览器中的页面效果IE9或初始状态效果3.3D变形及transform的转换属性语法：transform:rotate3d(x,y,z,angle);在3D空间，三个维度也就是三个坐标，及长、宽、高。轴的旋转是围绕一个[x，y，z]向量并经过元素原点。例如：transform:rotate3d(1,0,0,45deg);表示沿着X轴旋转45度。语法中，x，y，z分别代表横向、纵向、Z轴坐标位移向量的长度。可以变换理解方式：x，y，z为0是代表不旋转，为1时代表旋转。angle表示角度值。3.3D变形及transform的转换属性此外，在使用3D变形时，会经常用到perspective-origin属性。perspective-origin主要设置一个3D元素的底部位置，默认就是所看舞台或元素的中心，与transform–origin属性类似。中心位置的示意图transform-style属性也是3D效果中经常使用的，其两个参数flat、preserve-3d.前者flat为默认值，表示平面的；后者preserve-3d表示3D透视。举例演示【实例9-9】3D转换的效果。3D页面透视效果3D变形函数及其含义函数名称含义translate3d(x,y,z)、translateZ(z)定义3D位移转换scale3d(x,y,z)、scaleZ(z)定义3D缩放转换rotate3d(x，y，z，angle)、rotateX(angle)、rotateY(angle)、rotateZ(angle)定义3D旋转perspective(n)定义3D转换元素的透视视图matrix3d（n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n）定义3D转换，使用16个值的4*4矩阵4transitions过渡Part◎transitions功能介绍◎过渡属性的应用1transitions功能介绍在CSS3中，可以利用transitions实现元素从一中样式转变为另一种样式时添加效果，如渐显、渐弱、动画快慢等。过渡属性及其含义兼容性：IE10、Firefox、Chrome以及Opera支持transition属性。Safari需要前缀-webkit-。IE9以及更早的版本，不支持transition属性。Chrome25以及更早的版本，需要前缀-webkit-。属性名含义transition-property规定应用过渡的CSS属性的名称。transition-duration定义过渡效果花费的时间。默认是0。transition-timing-function规定过渡效果的时间曲线。默认是ease。transition-delay规定过渡效果何时开始。默认是0。transition简写属性，用于在一个属性中设置四个过渡属性。2过渡属性的应用1.transition-property属性transition-property属性用于指定应用过渡效果的CSS属性的名称，其过渡效果通常在用户将指针移动到元素上时触发。当指定的CSS属性改变时，过渡效果才开始。语法：transition-property:none|all|property;none表示没有属性会获得过渡效果；all表示所有属性都将获得过渡效