《HTML5+CSS3+JavaScript网页设计与制作项目教程（》课件_项目6 让页面更酷炫——CSS3高级应用.pptx

1、HTML5+CSS3+JavaScript网页设计与制作项目教程项目6 让你的页面更酷炫CSS3高级应用目录E N T E R P R I S E O P E R A T I O N R E P O R T04.总结提升03.知识链接02.学习目标01.项目导入PART 01项目导入【项目导入】【项目导入】“旅行家旅行家住宿住宿”页面效果展示页面效果展示CSS3不仅可以布局页面和美化页面，同时拓展了过渡、变形及动画效果，使网页更加生动。在网页制 作 中 可 以 使 用 这 些 动 画 效 果 代 替 复 杂 的JavaScript或Flash。本章将在布局美化页面的基础上，使用CSS3的过渡及

2、变形属性制作“旅行家攻略”页面，案例完成效果如图6.1所示。在一个网站中，所有页面往往具有风格统一的框架及样式风格，例如“旅行家攻略”页面中header及footer与“旅行家住宿”页面完全相同，banner结构与“旅行家住宿”页面结构相似；本章将着重讲解“达人攻略”和“主题攻略”部分动画效果的实现。PART 02知 识 目 标能 力 目 标1.掌握CSS3过渡属性2.掌握CSS3中2D变形属性3.掌握CSS3中2D变形属性4.理解CSS3变形相关属性1.能够使用过渡效果制作页面动画效果2.能够使用变形效果制作页面动画效果PART 03一、过渡transitionCSS3过渡属性transit

3、ion主要包括transition-property、transition-duration、transition-timing-function以及transition-delay四个分属性。使用过渡属性需注意浏览器的支持情况，Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性；Safari 需要前缀-webkit-；Internet Explorer 9 以及更早的版本，不支持 transition 属性；Chrome 25 以及更早的版本，需要前缀-webkit-。一、过渡transition1.transition

4、-propertytransition-property主要用来指定发生过渡效果的CSS属性，当指定的CSS属性发生变化时，过渡效果开始。其语法格式如下：transition-property:none|all|property;其中：none：表示没有属性发生过渡效果 all：表示所有属性均发生过渡效果 property：定义发生过渡效果的CSS属性，多个属性使用逗号隔开 一、过渡transition1.transition-propertytransition-property主要用来指定发生过渡效果的CSS属性，当指定的CSS属性发生变化时，过渡效果开始。其语法格式如下：transiti

5、on-property:none|all|property;其中：none：表示没有属性发生过渡效果 all：表示所有属性均发生过渡效果 property：定义发生过渡效果的CSS属性，多个属性使用逗号隔开 一、过渡transition【例6-1】盒子背景色变换 一、过渡transition2.transition-durationtransition-duration属性用来设置过渡效果持续的时间，默认值为0，属性值使用以秒（s）或毫秒（ms）为单位的时间值，其基本语法格式为：transition-duration:time;一、过渡transition【例6-2】正方形变圆形效果图是鼠标悬

6、停状态中，这样当鼠标悬停和离开时均会出现过渡效果。一、过渡transition3.transition-timing-function transition-timing-function用来指定过渡效果的速度曲线，即控制过渡变化的快慢。其基本语法格式如下：transition-timing-function:inear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);一、过渡transition其中：inear：匀速过渡，相当于cubic-bezier(0,0,1,1)；ease：以慢-快-慢的速度过渡，相当于cubic-bez

7、ier(0.25,0.1,0.25,1)；ease-in：以慢-快的速度过渡，相当于cubic-bezier(0.42,0,1,1)；ease-out：以快-慢的速度过渡，相当于cubic-bezier(0,0,0.58,1)；ease-in-out：以慢-快-慢的速度过渡，相当于cubic-bezier(0.42,0,0.58,1)cubic-bezier(n,n,n,n)：定义贝塞尔曲线控制过渡速度。一、过渡transition贝塞尔曲线如图6.5所示，曲线由四个控制点确定曲线的样式，P0(0,0)、P1(x1,y1)、P2(x2,y2)、P3(1,1)。其中P0和P3点的值是确定的，P1

8、和P2的值是不确定的。因此，可以通过设置P1及P2点的坐标来确定贝塞尔曲线的样式，即cubic-bezier(n,n,n,n)中的4个参数。一、过渡transition4.transition-delay transition-delay用来指定过渡效果的延迟时间，即控制过渡变化何时开始。其属性值是表示时间的参数，常用秒（s）或毫秒（ms）作为单位，基本语法格式如下：transition-timing-function:time;在例6-2的基础上，增加transition-delay属性，设置延迟时间可观察到不同的过渡效果。二、变形transformCSS3变形属性transform主要包括

9、移动translate、缩放scale、旋转rotate、扭曲skew、和以及矩阵变形matrix。transform还可以实现2D和3D两种情况下的变形效果。其基本语法格式如下：transform:none|transform-functions;其中：none：默认值，表示不变形。transform-functions：变形函数，包括translate()、scale()、rotate()、skew()、matrix()。使用变形属性需注意浏览器的支持情况，Internet Explorer 10、Firefox、Opera 支持 transform 属性；Internet Explore

10、r 9 支持替代的-ms-transform 属性（仅适用于 2D 转换）；Safari 和 Chrome 支持替代的-webkit-transform 属性（3D 和 2D 转换）；Opera 只支持 2D 转换。二、变形transform 所有的变形属性都基于元素的原点，元素的原点默认位置在盒子的中心点（50%，50%，0），即中线的交叉点。使用transform-orgin属性可以更改元素原点的位置，语法格式如下：transform-origin:x-axis y-axis z-axis;其中，x-axis，y-axis，z-axis分别为新原点相对于中心点在x、y、z轴上的偏移量。其取

11、值可以是方位词（left、right、center、top、bottom等）、像素值和百分比。二、变形transform1.2D变形（1）translate()移动：translate()可以通过定义平移距离的方法，实现目标的平移。注意这里默认以盒子左上角为参照点进行移动，其语法格式如下：transform:translate(x-value,y-value);其中：x-value：目标在X轴方向上的平移距离，可以取像素值或百分比。y-value：目标在Y轴方向上的平移距离，可以取像素值或百分比。二、变形transform1.2D变形（1）translate()移动：translate()可以

12、通过定义平移距离的方法，实现目标的平移。注意这里默认以盒子左上角为参照点进行移动，其语法格式如下：transform:translate(x-value,y-value);其中：x-value：目标在X轴方向上的平移距离，可以取像素值或百分比。y-value：目标在Y轴方向上的平移距离，可以取像素值或百分比。二、变形transform（2）scale()缩放：scale()方法可以用来缩放元素的大小。其语法格式如下：transform:scale(x-axis,y-axis);其中：x-axis：目标在X轴方向上的缩放系数。y-axis：目标在Y轴方向上的缩放系数。注意缩放系数可以取整数、负数

13、或小数。缩放后，元素宽高=初始宽高缩放系数。当|axis|1时，元素按比例放大；当axis0时，元素按顺时针方向旋转；angle0时，物体在成像面和视点之间，物体成像物体实际大小；当z0时，物体在成像面之后，物体成像物体实际大小。在3D变形中，当给元素设置perspective属性时，可以激活一个3D空间。除此之外，在3D变形的函数中的perspective()也可以激活3D空间。两者的区别是，perspective属性应用在所有变形元素的父对象上；perspective（）函数应用在当前变形的元素上，可以与其他tansform函数一起使用。二、变形transform二、变形transform

14、 perspective-origin属性：perspective-origin属性用来设置视点投射在成像面平面上的位置，如图6.12所示，其语法格式如下所示：perspective-origin:x-axis y-axis;其中x-axis和y-axis分别用来设置视点在x轴和y轴上的位置，其属性值可以是像素值、百分比或表示方位的词（left、right、center、top、bottom），其默认值为50%，即其父对象的中心点。perspective-origin属性需要与perspective属性结合起来使用，应用在其父对象上，以便将视点移至元素的中心以外位置。当视点位置变换时，投影位置

15、也随之变换。二、变形transform backface-visibility属性backface-visibility属性用来设置元素背面是否可见。其语法格式如下：backface-visibility:visible|hidden;其中visible表示元素背面可见，是backface-visibility的默认值；hidden表示反面不可见。二、变形transform方法描述matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。translate3d(x,y,z)定义 3D 移动translateX(x)定义

16、 3D 转换，仅用于设置X轴的偏移量translateY(y)定义 3D 转换，仅用于设置Y轴的偏移量translateZ(z)定义 3D 转换，仅用于设置Z轴的偏移量scale3d(x,y,z)定义 3D 缩放scaleX(x)定义 3D 转换，仅用于设置X轴的缩放比例scaleY(y)定义 3D 转换，仅用于设置Y轴的缩放比例scaleZ(z)定义 3D 转换，仅用于设置Z轴的缩放比例rotate3d(x,y,z)定义 3D 旋转rotateX(x)定义 3D 转换，仅用于设置X轴的旋转角度rotateY(y)定义 3D 转换，仅用于设置Y轴的旋转角度rotateZ(z)定义 3D 转换，

17、仅用于设置Z轴的旋转角度perspective()定义3D视距（2）3D变形方法3D变形的方法与2D变形的方法类似，如下表所示：表6-1 3D变形的方法二、变形transform例6-7 扑克牌翻转PART 04总结提升：动画animation CSS3不仅可以支持过渡transition和变形transform，还提供了animation属性支持动画。相对于过渡和变形，animation动画可以重复使用，制作复杂的动画效果，还可以将动画应用在不同的元素之上。使用Animation属性的一般流程主要包括2个步骤：定义关键帧、设置动画属性。总结提升：动画animation 1、关键帧keyfra

18、meskeyframes 规则用于创建动画关键帧。keyframes的实质就是设定某个时间点的CSS样式。keyframes规则语法格式如下keyframes identifier 0%/*CSS样式*/25%/*CSS样式*/50%/*CSS样式*/75%/*CSS样式*/100%/*CSS样式*/其中，百分比值表示动画时长内关键时间点，需要对不同关键点的CSS样式进行设置。总结提升：动画animation2、animation的属性 仅设定keyframes规则，页面元素还无法动起来，需要将动画绑定选择器，并且设置animation属性，设定关键帧之间的过渡属性。在 keyframes 中

19、CSS 样式的基础上，绑定选择器，页面元素即才能由当前样式逐渐变化为新样式，形成动画效果。animation属性与之前学习过的transition过渡属性非常相似，animation动画的属性如表6-2所示：注意：不同的浏览器对animation属性的支持不同，使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。总结提升：动画animation表 6-2 animation属性值描述animation-name规定需要绑定到选择器的 keyframe 名称。animation-duration规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function规定动画的速度曲线。animation-delay规定在动画开始之前的延迟。animation-iteration-count规定动画应该播放的次数。animation-direction规定是否应该轮流反向播放动画。总结提升：动画animation例 6-8 制作animation动画