1、任务9:运用特殊效果网页设计与制作(HTML+CSS+Javascript)网页设计与制作课程组目标TARGET知识目标 掌握CSS3多列布局的方法；掌握CSS3常用的transform转换方法；掌握CSS3中transitions过渡的使用方法；掌握animation动画的使用方法。1 任务描述 2 CSS3多列布局 3 CSS3转换transform 4 transitions过渡 6 综合实例 7 任务实施 8 任务拓展 5 animation动画1任务描述Part交通示意图动画效果 本任务就是应用转换、过渡、动画等特殊效果，制作新生报到时从火车站到信息学院的交通示意动画效果。任务描述：
2、交通示意图动画效果2CSS3多列布局Part 认识columns多列布局 columns的其他属性1 认识columns多列布局columns是多列布局特性的基本属性，该属性可以同时定义每列的宽度和列数。语法：columns：column-width|column-count;语法中，column-width设置对象每列的宽度；column-count设置对象的列数。兼容性：IE10以上 和 Opera 支持多列属性，Firefox 需要前缀-moz-，Chrome 和 Safari 需要前缀-webkit-。IE 9 以及更早的版本不支持多列属性。作用：columns适合应用在网页中需要显示
3、大量文本时，建议分列，方便阅读。举例演示【实例9-1】多列布局columns的使用。2 columns的其他属性column还包含其他的常用属性。属性名称语法含义column-width语法：column-width：|auto;设置或检索对象每列的宽度。举例：column-width:300px;column-count语法：column-count：|auto;设置或检索对象的列数。举例：column-count:3;column-gap语法：column-gap：|normal;设置或检索对象的列与列之间的间隙。举例：column-gap:normal;/*默认值*/column-gap
4、:40px;column-rule语法：column-rule：column-rule-width|column-rule-style|column-rule-color;设置或检索对象的列与列之间的边框。复合属性，相当于border属性。举例：column-rule:1px solid#999;column-span语法：column-span：none|all;设置或检索对象元素是否横跨所有列。举例：column-span:all;还有column-fill、column-break-before、column-break-after、column-break-inside等几个属性。举例
5、演示【实例9-2】多列布局columns举例。3CSS3转换Part transform转换简介 常用的transform变形方法 运用3D变形1 transform转换简介在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动等变形处理，结合即将学习的过渡和动画属性产生一些新的动画效果。语法：transform：none|transform-function；默认值为none，适用于内联元素和块元素，表示不进行变形 transform-function用于设置变形函数，可以是一个或多个变形函数列表。函数名称含义translate()移动元素对象，即基于X和Y坐标
6、重新定位元素。scale()缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数、负数和小数。rotate()旋转元素对象，取值为一个度数值。skew()倾斜元素对象，取值为一个度数值。matrix()定义矩形变换，即基于X和Y坐标重新定位元素的位置。兼容性：IE10、Firefox、Opera 支持 transition 属性。Chrome 和Safari 需要前缀-webkit-，IE 9 需要前缀-ms-。2 常用的transform变形方法1.移动方法translate()在CSS3中，使用translate()方法来实现图像或文字的移动。语法：transform:transla
7、te(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
8、的缩放比例相同。举例演示【实例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轴进行倾斜角度
9、值，X轴逆时针转为正；Y轴顺时针转为正。举例演示【实例9-6】scale缩放变形的使用。5 更改变换的中心点transform-origin在CSS3中，transform属性平移、缩放、倾斜及旋转等效果，针对的元素默认都是以元素的正中心为中心点的，如果需要改变这个中心点，可以使用transform-origin属性。语法：transform-origin:x y z;transform-origin:left top；transform-origin:50%50%；语法中，x,y,z 的默认值为50%、50%、0，这表示元素的中心。x表示视图被置于X轴的何处，可取值有left、center、
10、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像素宽的
11、显示器中有张图片，应用了3D transform，同时，该元素或该元素父辈元素设置的perspective大小为1920像素。则这张图片多呈现的3D效果就跟浏览者本人在1.5个显示器宽度的地方(1280*1.5=1920)看到的真实效果一致！透视示意图1.认识三维空间要想呈现立体透视的效果，必须perspective属性，它是透视，视角的意思。比方说，一个1280像素宽的显示器中有张图片，应用了3D transform，同时，该元素或该元素父辈元素设置的perspective大小为1920像素。则这张图片多呈现的3D效果就跟浏览者本人在1.5个显示器宽度的地方(1280*1.5=1920)看到
12、的真实效果一致！透视示意图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转换的
13、效果。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
14、的转换属性此外，在使用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位移转换scale3
15、d(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功能介绍 过渡属性的应用1 transitions功能介绍在CSS3中，可以利用transitions实现元素从一中样式转变为另一种样式时添加效果，如渐显、渐弱、动画快慢
16、等。过渡属性及其含义兼容性：IE10、Firefox、Chrome 以及 Opera 支持 transition 属性。Safari 需要前缀-webkit-。IE 9以及更早的版本，不支持 transition 属性。Chrome 25 以及更早的版本，需要前缀-webkit-。属性名含义transition-property规定应用过渡的 CSS 属性的名称。transition-duration定义过渡效果花费的时间。默认是0。transition-timing-function规定过渡效果的时间曲线。默认是 ease。transition-delay规定过渡效果何时开始。默认是0。tr
17、ansition简写属性，用于在一个属性中设置四个过渡属性。2 过渡属性的应用1.transition-property属性transition-property属性用于指定应用过渡效果的CSS属性的名称，其过渡效果通常在用户将指针移动到元素上时触发。当指定的CSS属性改变时，过渡效果才开始。语法：transition-property:none|all|property;none表示没有属性会获得过渡效果；all表示所有属性都将获得过渡效果；property表示定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔。2.transition-property属性transition-dur
18、ation属性用于定义过渡效果所花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）。语法：transition-duration:time;举例演示【实例9-10】过渡属性的使用。过渡过程中图片效果过渡完成后的效果3.transition-timing-function属性transition-timing-function属性规定过渡效果的速度曲线，默认值为“ease”。语法：transition-timing-function:linear|ease ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);transition-timi
19、ng-function属性的取值及其含义属性取值含义linear指定以相同速度（匀速）开始至结束的过渡效果ease指定以慢速开始，然后加快，最后慢慢结束的过渡效果ease-in指定以慢速开始，然后逐渐加快ease-out指定以慢速开始和结束的过渡效果ease-in-out指定以慢速开始和结束的过渡效果cubic-bezier（n,n,n,n）定义用于加速或者减速的贝塞尔曲线的形状，它们的值在014.transition-delay属性transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。语法：transition-delay:time;tra
20、nsition-delay的属性值可以为正整数、负整数和0。当设置为负数时，过渡动作会从该时间点开始，之前的动作被截断；设置为正数时，过渡动作会被延迟触发。举例演示【实例9-11】过渡属性的使用。元素动画在0-2秒时效果元素动画在4秒时效果元素动画在6秒时效果动画过渡完成后的效果5.transition属性transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。语法：transition:property dur
21、ation timing-function delay;语法中，在使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义。无论是单个属性还是简写属性，使用时都可以实现多个过渡效果。例如：transition:transform 5s ease-in-out 2s;举例演示【实例9-12】过渡属性的使用。动画的初始状态动画在1秒时刻的效果动画在2秒时刻的效果动画过渡完成的效果5animation动画Part 动画的基本定义与调用 animation的其他属性1 动画的基本定义与调用动画是使元素从一种样式逐渐变化为另一种样式的效果。CSS3中主要运用keyframes关键
22、帧和animation相关属性来实现。keyframes用来定义动画 animation将定义好的动画绑定到特定元素，并定义动画时长、重复次数等相关属性。兼容性：IE10、Firefox以及 Opera支持keyframes规则和animation属性。Chrome和Safari 需要前缀-webkit-。Internet Explorer 9，以及更早的版本，不支持keyframe规则或animation 属性。1.keyframes的使用方法语法：keyframes animationname keyframes-selector CSS-styles；animationname表示动画名
23、称，动画必须具有名称，不能重名，它是动画引用时的唯一标识。keyframes-selector是关键帧选择器，表示指定当前关键帧要应用到整个动画过程中的位置，通常通过百分比去表达，还可以使用from或者to表示，from表示动画的开始，相当于0%，to表示动画的结束，相当于100%。CSS-styles表示执行到当前关键帧时对应的动画状态。1.keyframes的使用方法例如：keyframes myfirst /*定义动画，命名为myfirst*/0%width:20px；/*定义动画的开始时的状态，元素宽为20像素*/100%width:300px；/*定义动画的结束时的状态，元素宽为30
24、0像素*/这段代码定义了一个名为“myfirst”的动画，该动画在开始时的状态，定义了元素宽为20像素，动画的结束时的状态，定义了元素宽为200像素。这段代码等同于：keyframes myfirst /*定义动画，命名为myfirst*/fromwidth:20px；/*定义动画的开始时的状态，元素宽为20像素*/towidth:300px；/*定义动画的结束时的状态，元素宽为300像素*/2.动画的调用当在 keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性（animation-name和animation-durati
25、on。），即可将动画绑定到选择器。语法：animation-name:keyframeneme|none;animation-name属性用于定义要应用的动画名称，为keyframes动画规定名称。语法中，keyframename参数用于规定需要绑定到选择器的keyframe的名称，如果值为none，则表示不应用任何动画，通常用于覆盖或者取消动画。语法：animation-duration:time;animation-duration属性用于定义整个动画效果完成所需要的时间，以秒或毫秒计。请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。语法中，ani
26、mation-duration属性初始值为0，time多数是以秒（s）或者毫秒（ms）为单位的时间，默认值为0，表示没有任何动画效果。举例演示【实例9-13】animation的使用。初始动画效果最终的动画效果2 animation的其他属性1.animation-timing-function属性animation-timing-function用来规定动画的速度曲线，定义使用哪种方式执行动画效果。语法：animation-timing-function:linear|ease ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);本属性的取值
27、较多，属性值及含义与transition-timing-function属性的取值类似。2.animation-delay属性animation-delay属性用于定义执行动画效果之前延迟的时间，即规定动画的开始时间。语法：animation-delay:time;语法中，参数time用于定义动画开始前等待的时间，其单位是s或者ms，默认属性值为0，animation-delay属性适用于所有的块元素和行内元素。3.animation-iteration-count属性animation-iteration-count属性用于定义动画的播放次数。语法：animation-iteration-c
28、ount:number|infinite;语法中，animation-iteration-count属性初始值为1，也就是动画只播放一次，适用于所有的块元素和行内元素。如果属性值为number，则用于定义播放动画的次数；如果是infinite（无限的，无穷的），则指定动画循环播放。4.animation-direction属性animation-direction属性定义当前动画播放的方向，即动画播放完成后是否逆向交替循环。语法：animation-direction:normal|alternate;语法中，animation-direction属性初始值为normal，适用于所有的块元素和
29、行内元素。默认值normal表示动画正常显示。如果属性值是“alternate”，则实现逆向播放。5.animation-play-state属性animation-play-state属性规定动画是否正在运行或暂停。语法：animation-play-state:paused|running;语法中，paused 表示规定动画已暂停；running规定动画正在播放。animation-play-state属性默认是 running举例演示【实例9-14】animation其他属性的使用。动画执行前的效果初始动画效果动画最终状态Logo变大的效果6.animation-fill-mode属性a
30、nimation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。语法：animation-fill-mode:none|forwards|backwards|both;none 表示不设置结束之后的状态，默认情况下回到跟初始状态一样；forwards 表示将动画元素设置为整个动画结束时的状态 backwards 明确设置动画结束之后回到初始状态；both 表示设置为结束或者开始时候的状态。一般都是回到默认状态。7.Animation复合属性animation属性是一个复合属性。语法：animation:animation-name animation-duration
31、animation-timing-function animation-delay animation-iteration-count animation-direction;语法中，使用animation属性时必须指定animation-name和animation-direction属性，如果持续的时间为0，则不会播放动画。其他属性如果没有设置，可以省略。除了animation-play-state 属性，所有动画属性都可以在使用animation简写属性。6综合实例Part 艺术照片墙艺术照片墙【演示】为了宣传校园文化，特制作了艺术照片墙，页面效果如左所示，综合应用本单元所学习的变形、过
32、渡与动画等知识，实现当鼠标放置到某个图片上方时，让图片旋转并同时放大展示效果，如右图所示。7任务实施Part 交通示意图动画效果【演示】本任务应用过渡、动画等效果设计完成新生报到时从火车站到信息学院的交通示意图，如图所示。举例演示8任务拓展Part CSS3 Animation动画库 CSS3 Animation在线调节工具1.CSS3 Animation动画库介绍一款CSS3 Animation动画库，网址http:/daneden.github.io/animate.css/。举例演示2.CSS3 Animation在线调节工具介绍腾讯的isux一款非常强大的动画工具，网址https:/ 母亲节礼盒【实训目的】1.掌握2D转换属性实现图像的变形方法。2.掌握transition过渡动画的制作方法。【实训内容】实训任务：充分运用2D转换属性中斜切属性，然后旋转定义边框的长方形，把3个旋转的立体面结合起来构成一个三维对象,最后，利用3D动画属性，设置当属鼠标放置在盒子上方时，盒子自行移动。母亲节礼盒谢谢多一点努力,多一点实践,多一点点就能创造奇迹!
