模块9 转换、过渡与动画

模块九转换、过渡与动画《HTML5+CSS3网页设计基础》学习目标/Target理解CSS3

2D转换，并掌握常用的2D转换。理解CSS3

3D转换，并掌握常用的3D转换。能够掌握CSS3的过渡效果。理解过渡与动画的区别，并能制作简单动画。CSS32D转换任务一CSS转换（Transform）是作为网页上高级显示和动画的高速渲染规范而诞生的。CSS中的2D转换允许在二维空间中执行一些基本的变换操作，例如移动、旋转、缩放或扭曲等。变换后的元素与绝对定位的元素类似，不会影响周围的元素，但可以和周围的元素重叠，不同的是，转换后的元素仍处于文档流（在页面中仍然会占用为转换之前的空间）。CSS32D转换一、转换中的二维坐标系转换元素的左上角是坐标原点，向右为x轴的正方向，向下是y轴的正方向。二、2D位移2D位移可以改变元素的位置。可以通过transform属性translate()方法来实现。基本语法格式如下：transform:translate(x,y);在实际开发中，如果只希望元素水平方向或垂直方向上的移动，还可以通过transform属性translateX()方法或translateY()方法来实现。transform:translateX(50px);transform:translateY(50px);二、2D位移利用CSS3的2D位移，配合定位技术，可实现元素水平垂直居中。例如：.box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}【例9-1】2D位移。二、2D位移/*沿X轴正向位移50px*/.one{transform:translateX(50px);}/*沿Y轴正向位移自身高度的30%*/.two{transform:translateY(30%);}/*沿X轴反向位移20px，Y轴正向位移20px*/.three{transform:translate(-20px,20px);}三、2D缩放2D缩放可以实现元素的放大或缩小。可以通过transform属性scale()方法来实现。基本语法格式如下：transform:scale(x,y);在实际开发中，如果只希望元素水平方向或垂直方向上的缩放，还可以通过transform属性scaleX(angle)方法或scaleY(angle)方法来实现。三、2D缩放【例9-2】2D缩放。

/*沿X轴缩放0.8px*/.one{transform:scaleX(0.8);}/*沿Y轴缩放1.2*/.two{transform:scaleY(1.2);}/*沿X轴缩放1.2，Y轴缩放-0.8*/.three{transform:scale(1.2,-0.8);}四、2D旋转2D旋转可以让元素在二维平面内（沿Z轴，Z轴方向是由屏幕垂直指向读者），顺时针旋转或逆时针旋转。可以通过transform属性rotate()方法来实现。基本语法格式如下：transform:rotate(angle);在上面的语法中，参数angle表示旋转的角度值，单位是deg。角度值为正值表示顺时针旋转，负值表示逆时针旋转。旋转参考点为元素的中心点。【例9-3】2D旋转。四、2D旋转

/*2D旋转30度*/.one{transform:rotate(30deg);}/*2D旋转-30度*/.two{transform:rotate(-30deg);}五、2D扭曲2D扭曲可以让元素在二维平面内被“拉扯”，进而“走形”，实际开发几乎不用，了解即可。2D扭曲可以通过transform属性skew()方法来实现。基本语法格式如下：transform:skew(x-angle,y-angle);在上面的语法中，参数x-angle、y-angle分别用于定义水平（x轴）和垂直（y轴）的扭曲角度值，单位是deg。取值可以是正值或负值，表示不同的扭曲方向。【例9-4】2D扭曲。五、2D扭曲

/*沿X轴扭曲*/.one{transform:skewX(20deg);}/*沿Y轴扭曲*/.two{transform:skewY(20deg);}/*沿X轴，Y轴同时扭曲*/.three{transform:skew(20deg,20deg);}六、变换原点元素变换时，默认的原点是元素的中心（50%50%0），使用transform-origin

可以设置变换的原点。修改变换原点对位移没有影响，对旋转、缩放和扭曲会产生影响。基本语法格式如下：transform-origin:x-axisy-axisz-axis;（1）x-axis：定义原点X轴方向位于元素的位置（默认值50%，即中间）。可能的值：left|center|right|length|%。（2）y-axis：定义原点Y轴方向位于元素的位置（默认值50%，即中间）。可能的值：top|center|bottom|length|%。（3）z-axis：定义原点Z轴方向位于元素的位置（默认值0，即XY平面）。只能定义值：length。

/*变换原点后的2D旋转30度*/.one{transform:rotate(30deg);}/*变换原点左上角后的2D旋转30度*/.two{transform-origin:0px0px;transform:rotate(30deg);}【例9-5】变换原点旋转。六、变换原点七、matrix()方法matrix()方法可以看作是skew()、scale()和translate()几个方法的缩写形式，通过matrix()方法可以同时定义2D扭曲、缩放和位移操作。基本语法格式如下：transform:matrix(a,b,c,d,tx,ty);在上面的语法中，参数a,b,c,d分别代表方法scaleX(),skewY(),skewX(),scaleY()，它们共同代表一个线性变换。tx和ty表示位移，分别代表translateX()和translateY()。.one{width:100px;height:100px;background-color:aqua;text-align:center;line-height:100px;/*多重转换*/transform:translate(50%,50%)rotate(45deg);}【例9-6】多重变换。六、变换原点CSS33D转换任务二CSS33D转换在CSS中，除了可以对页面中的元素进行2D转换外，还可以对象元素进行3D转换（将页面看作是一个三维空间来对页面中的元素进行移动、旋转、缩放和倾斜等操作）。与2D转换相同，3D转换同样不会影响周围的元素，而且可以与其它元素重叠。变换后的元素仍处于文档流（在页面中仍然会占用为转换之前的空间）。一、开启3D空间元素进行3D变换的首要操作需要将父元素开启3D空间。使用transform-style开启3D空间。基本语法格式如下：transform-style:flat|preserve-3d;（1）flat：让子元素位于此元素的二维平面内（2D空间），此为默认值。（2）preserve-3d：让子元素位于此元素的三维空间内（3D空间）。二、设置景深perspective:none|value;（1）none：不指定透视（默认值）（2）value：长度值。指定观察者距离z=0平面的距离（一般距离设置在500px-1000px），不允许负值。何为景深？指定观察者与z=0平面（可理解为屏幕）的距离，能让发生3D变换的元素，产生透视效果，看来更加立体。使用perspective设置景深。基本语法格式如下：三、透视点位置perspective-origin:x-axis,y-axis,z-axis;（1）x-axis：定义视图被置于X轴的何处。可能的值：left|center|right|length|%。（2）y-axis：定义视图被置于Y轴的何处。可能的值：top|center|bottom|length|%。（3）z-axis：定义视图被置于Z轴的何处。可能的值：length。默认值为50%50%0，表示透视点位置在元素的中心位置。所谓透视点位置，就是观察者位置，默认的透视点处于转换元素的中心。使用perspective-origin设置观察者位置（透视点的位置）。基本语法格式如下：四、3D旋转rotateX(angle):设置x轴旋转角度，需指定一个角度值（deg），面对x轴正方向：正值顺时针，负值逆时针。rotateY(angle):设置y轴旋转角度，需指定一个角度值（deg），面对y轴正方向：正值顺时针，负值逆时针。rotate3d(x,y,z,angle):前3个参数分别表示坐标轴：x、y、z，第4个参数表示旋转的角度，参数不允许省略。例如：transform:rotate3d(1,1,1,30deg)的意思是x、y、z分别旋转30度。3D旋转主要是让元素沿x轴和y轴旋转，具体使用方式如下。（1）先给元素添加转换属性transform。（2）编写transform的具体值。四、3D旋转【例9-7】CSS转换之3D旋转。

/*沿X轴旋转*/.one{transform:rotateX(45deg);}/*沿Y轴旋转*/.two{transform:rotateY(45deg);}/*同时沿XY轴旋转*/.three{transform:rotate3d(1,1,0,45deg);}五、3D位移translateZ(z):设置z轴位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能写百分比translate3d(x,y,z):第1个参数对应x轴，第2个参数对应y轴，第3个参数对应z轴，且均不能省略2D位移是让元素沿x、y轴位移，3D位移是让元素沿z轴位移。3D位移相关方法如下：五、3D位移【例9-8】CSS转换之3D位移。

/*沿Z轴位移*/.one{transform:translateZ(-50px);}/*同时沿XZ轴位移*/.two{transform:translate3d(50px,0,50px);}六、3D缩放scaleZ(z):设置z轴方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。scale3d(x,y,z):第1个参数对应x轴，第2个参数对应y轴，第3个参数对应z轴，参数不允许省略。3D缩放是让元素沿z轴缩放。3D缩放相关方法如下：六、3D缩放【例9-9】CSS转换之3D缩放。

/*沿Z轴缩放（旋转后才能看到效果）*/.one{transform:scaleZ(0.6)rotateX(45deg);}

/*旋转不缩放，作为对比*/.two{transform:rotateX(45deg);}利用CSS过渡效果任务三利用CSS过渡效果CSS提供了强大的过渡属性，使用此属性可以在不使用Flash动画或JavaScript脚本的情况下，为元素从一种形式转变为另外一种形式添加效果。例如，渐隐、渐显、速度的变化等。CSS3的过渡属性主要包括transition-property、transition-duration、transition-timing-function和transition-delay等。一、过渡属性选择器{transition-property:none|all|property;…}（1）none：没有属性获得过渡效果（默认值）。（2）all：所有属性都将获得过渡效果。（3）property：定义过渡效果的CSS属性名称，多个属性之间用逗号分隔。transition-property属性设置应用过渡的CSS属性。其语基本法格式如下：一、过渡属性【例9-10】transition-property属性使用演示。当鼠标悬停在区块上，区块大小改变。<style>div{width:100px;height:100px;background:red;transition-property:width,height;}div:hover{width:200px;height:200px;}</style>二、过渡持续时间属性选择器{transition-duration:time;}transition-duration属性的默认值是0。time取值为时间，可以是秒（m）或者毫秒（ms）。例如，将上例的样式代码修改如下：transition-duration属性用于定义过渡属性的持续时间。其语法格式如下：div{width:100px;height:100px;background:red;transition-property:width,height;transition-duration:2s;}三、过渡速度曲线属性选择器{transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);}（1）linear：规定以相同速度开始至结束的过渡效果。（2）ease：默认值。规定慢-快-慢的过渡效果。（3）ease-in：规定以慢速开始的过渡效果。（4）ease-out：规定以慢速结束的过渡效果。（5）ease-in-out：规定以慢速开始和结束的过渡效果。（6）cubic-bezier(n,n,n,n)：在cubic-bezier（贝塞尔曲线）函数中定义自己的值。0~1之间的数值。transition-timing-function

属性规定了过渡效果的速度曲线。其基本语法格式如下：三、过渡速度曲线属性【例9-11】transition-timing-function属性使用演示。当鼠标悬停在区块上，区块过渡效果的速度曲线变化。三、过渡速度曲线属性【例9-11】transition-timing-function属性使用演示。当鼠标悬停在区块上，区块过渡效果的速度曲线变化。

.box1{background-color:skyblue;transition-timing-function:ease;}.box2{background-color:orange;transition-timing-function:linear;}.box3{background-color:gray;transition-timing-function:ease-in;}.box4{background-color:tomato;transition-timing-function:ease-out;}.box5{background-color:green;transition-timing-function:ease-in-out;}.box6{background-color:purple;transition-timing-function:step-start;}.box7{background-color:deepskyblue;transition-timing-function:step-end;}.box8{background-color:chocolate;transition-timing-function:steps(20,end);}.box9{background-color:gold;transition-timing-function:cubic-bezier(1,.35,.78,1.24);}四、过渡延迟时间属性选择器{transition-delay:time;}transition-delay属性的默认值是0。time取值为时间，可以是秒（m）或者毫秒（ms）。例如，将上例的样式代码修改如下：transition-delay

属性规定了过渡效果切换的延迟时间。其基本语法格式如下：div:hover{border-radius:50%;background:pink;transition-property:border-radius,background;transition-timing-function:ease-in-out;transition-duration:2s;transition-delay:200ms;}五、过渡复合属性选择器{transition:propertydurationtiming-functiondelay;}使用transition-delay属性设置过渡效果可以简化代码的书写，但在定义时，它的各个参数必须按照顺序进行设置，不能颠倒。transition属性是一个复合属性，用于在同一个属性中设置transition-property、transition-duration、transition-timing-function和transition-delay等4个过渡属性。其基本语法格式如下：五、过渡复合属性div:hover{border-radius:50%;transition-property:border-radius,background;transition-duration:2s;transition-timing-function:ease-in-out;transition-delay:200ms;}可以简写为：例如，代码：div:hover{background:pink;transition:border-radius2sease-in-out200ms;}CSS3动画制作任务四一、动画中的基本概念一段动画，从本质上讲就是一段时间内连续播放的一定数量的画面。每一幅画面叫做“帧”。1．帧关键帧是指在构成一段动画的若干帧中，起到决定性作用的2~3帧。如图所示。2．关键帧二、过渡和动画的区别（1）动画不需要事件触发，过渡需要事件触发。（2）过渡只有一组关键帧（开始-结束），动画可以设置多个关键帧。三、动画的基本使用@keyframes规则用来定义动画各个阶段（关键帧）的属性值，语法格式如下：1．定义关键帧（定义动画）@keyframes动画名{from{properties:value;}/*percentage：定义动画的各个阶段（关键帧），为百分比值，可以添加若干个*/percentage{properties:value;}to{properties:value;}}三、动画的基本使用给元素应用动画需要两个必要的属性。（1）animation-name：给元素指定具体的动画（指定要绑定到选择器的关键帧的名称）。（2）animation-duration：设置动画所需时间。2．给元素应用动画三、动画的基本使用【例9-12】CSS动画。<style>@keyframesball{from{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px;}75%{top:200px;left:0px;}to{top:0px;left:0px;}}div{width:100px;height:100px;border-radius:50%;background-color:red;position:relative;/*动画必要属性*/animation-name:ball;animation-duration:2s;}</style>四、动画的属性用于设置动画延迟，属性值为数值，单位为s（秒）或ms（毫秒）。1．animation-delay属性四、动画的属性设置动画的类型（与过渡类似），常用值如下。（1）ease：平滑动画（默认值）。（2）linear：线性过渡。（3）ease-in：慢→快。（4）ease-out：快→慢。（5）ease-in-out：慢→快→慢。（6）step-start：等同于steps(1,start)。（7）step-end：等同于steps(1,end)。（8）steps(integer,?)：接受两个参数的步进方法。（9）cubic-bezie(number,number,number,number)：特定的贝塞尔曲线类型。2．animation-timing-function属性四、动画的属性指定动画的播放次数。（1）number：动画循环次数。（2）infinite：无限循环。3．animation-iteration-count属性四、动画的属性用于指定动画方向。（1）normal：正常方向(默认)。（2）reverse：反方向运行。（3）alternate：先正向运行，再反方向运行，并持续交替运行。（4）alternate-reverse：先反运行，再正方向运行，并持续交替运行。4．animation-direction属性四、动画的属性设置当动画播放结束之后对象的状态（无限循环时不能用）（1）forwards：设置对象状态为动画结束时的状态。（2）backwards：设置对象状态为动画开始时的状态。5.animation-fill-mode属性四、动画的属性设置动画的播放状态（一般与事件关联变化）。（1）running：运动（默认）。（2）paused：暂停。6.animation-play-state属性四、动画的属性通过animation属性可以同时定义上述的多个属性，语法格式如下：7.动画的复合属性animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state;其中每个参数分别对应前面介绍的各个属性，如果省略其中的某个或多个值，则将使用该属性对应的默认值。说明：animation-play-state一般单独使用。三、动画的基本使用【例9-13】CSS动画之其他属性。div{width:100px;height:100px;border-radius:50%;

background-color:red;position:relative;/*动画必要属性*/animation-name:ball;animation-duration:2s;/*依次添加下列属性，并改变属性值看效果的变化*/animation-delay:2s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;}四、动画的属性【例9-14】CSS动画之复合属性。<style>.boy{width:184px;height:325px;background-image:url('images/boy.png');margin:0auto;margin-top:100px;animation:boy1ssteps(7)infinite;}@keyframesboy{from{}to{background-position:-1288px0px;}}</style>实战案例任务五用CSS3动画制作一个图片轮播，效果如图所示。实战案例一、原理分析（1）设置一个用于显示轮播图片的容器。（2）设置一个存放图片的容器（本例用4张图片）。该容器是显示轮播图片容器的子元素。（3）为存放图片容器添加步进动画（每秒中向左移动一张图片的位置）。（4）设置指示器。（5）为指示器添加背景。（6）指示器背景向右移动。二、制作页面结构<body><divclass="carousel"><section><div><imgsrc="imag