版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
HTML5+CSS3+JavaScript网页设计与制作项目教程项目6让你的页面更酷炫——CSS3高级应用目录ENTERPRISEOPERATIONREPORT04.总结提升03.知识链接02.学习目标01.项目导入项目导入PART01项目导入【项目导入】“旅行家——住宿”页面效果展示CSS3不仅可以布局页面和美化页面,同时拓展了过渡、变形及动画效果,使网页更加生动。在网页制作中可以使用这些动画效果代替复杂的JavaScript或Flash。本章将在布局美化页面的基础上,使用CSS3的过渡及变形属性制作“旅行家——攻略”页面,案例完成效果如图6.1所示。在一个网站中,所有页面往往具有风格统一的框架及样式风格,例如“旅行家——攻略”页面中header及footer与“旅行家——住宿”页面完全相同,banner结构与“旅行家——住宿”页面结构相似;本章将着重讲解“达人攻略”和“主题攻略”部分动画效果的实现。学习目标PART02知识目标能力目标掌握CSS3过渡属性掌握CSS3中2D变形属性掌握CSS3中2D变形属性理解CSS3变形相关属性能够使用过渡效果制作页面动画效果能够使用变形效果制作页面动画效果知识链接PART03一、过渡transitionCSS3过渡属性transition主要包括transition-property、transition-duration、transition-timing-function以及transition-delay四个分属性。使用过渡属性需注意浏览器的支持情况,InternetExplorer10、Firefox、Chrome以及Opera支持transition属性;Safari需要前缀-webkit-;InternetExplorer9以及更早的版本,不支持transition属性;Chrome25以及更早的版本,需要前缀-webkit-。
一、过渡transition1.transition-propertytransition-property主要用来指定发生过渡效果的CSS属性,当指定的CSS属性发生变化时,过渡效果开始。其语法格式如下:transition-property:none|all|property;其中:none:表示没有属性发生过渡效果all:表示所有属性均发生过渡效果property:定义发生过渡效果的CSS属性,多个属性使用逗号隔开
一、过渡transition1.transition-propertytransition-property主要用来指定发生过渡效果的CSS属性,当指定的CSS属性发生变化时,过渡效果开始。其语法格式如下:transition-property:none|all|property;其中:none:表示没有属性发生过渡效果all:表示所有属性均发生过渡效果property:定义发生过渡效果的CSS属性,多个属性使用逗号隔开
一、过渡transition【例6-1】盒子背景色变换
一、过渡transition2.transition-durationtransition-duration属性用来设置过渡效果持续的时间,默认值为0,属性值使用以秒(s)或毫秒(ms)为单位的时间值,其基本语法格式为:transition-duration:time;
一、过渡transition【例6-2】正方形变圆形效果图是鼠标悬停状态中,这样当鼠标悬停和离开时均会出现过渡效果。
一、过渡transition3.transition-timing-functiontransition-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-bezier(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和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主要包括移动translate、缩放scale、旋转rotate、扭曲skew、和以及矩阵变形matrix。transform还可以实现2D和3D两种情况下的变形效果。其基本语法格式如下:transform:none|transform-functions;其中:none:默认值,表示不变形。transform-functions:变形函数,包括translate()、scale()、rotate()、skew()、matrix()。
使用变形属性需注意浏览器的支持情况,InternetExplorer10、Firefox、Opera支持transform属性;InternetExplorer9支持替代的-ms-transform属性(仅适用于2D转换);Safari和Chrome支持替代的-webkit-transform属性(3D和2D转换);Opera只支持2D转换。。二、变形transform所有的变形属性都基于元素的原点,元素的原点默认位置在盒子的中心点(50%,50%,0),即中线的交叉点。使用transform-orgin属性可以更改元素原点的位置,语法格式如下:transform-origin:x-axisy-axisz-axis;
其中,x-axis,y-axis,z-axis分别为新原点相对于中心点在x、y、z轴上的偏移量。其取值可以是方位词(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()可以通过定义平移距离的方法,实现目标的平移。注意这里默认以盒子左上角为参照点进行移动,其语法格式如下: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轴方向上的缩放系数。注意缩放系数可以取整数、负数或小数。缩放后,元素宽高=初始宽高×缩放系数。当|axis|<1时,元素按比例缩小;当|axis|>1时,元素按比例放大;当axis<0时,元素翻转。二、变形transform(3)rotate()旋转:rotate()方法可以使元素按照设置的角度旋转。其语法格式如下:transform:rotate(angle);当angle>0时,元素按顺时针方向旋转;angle<0时元素按逆时针方向旋转。二、变形transform(4)skew()倾斜:scale()方法可以用来设置元素的倾斜样式。其语法格式如下:transform:skew(x-angle,y-angle);其中:x-angle:目标相对于X轴方向上的倾斜角度。y-angle:目标相对于X轴方向上的倾斜角度。二、变形transform(5)matrix()矩阵变形:2D坐标系中,matrix(a,b,c,d,e,f)有六个参数,用来表示元素的变换。这六个参数对应到矩阵如下:在图形学上,用齐次坐标矩阵和图形的顶点相乘,就能得到变换后的新顶点的位置。ax+cy+e表示变换后的水平坐标,bx+dy+f表示变换后的垂直位置。二、变形transform2.3D变形元素的3D变形是建立在三维坐标系上的,如图6.10所示。要使用CSS3的3D变形,首先要将变形类型设置为3D,其语法格式如下:transform-style:flat|preserve-3d其中flat为默认值,表示所有子元素在2D平面呈现;preserve-3d表示所有子元素在3D空间中呈现。在使用Preserve-3d时需要注意以下两个问题:
ransform-style属性需要设置在父元素中,并且高于任何嵌套的变形元素。当元素设置了transform-style值为preserve-3d,其overflow属性不能设置为hidden,否则3D变形效果将无法显示。二、变形transform(1)3D变形属性在使用3D变形时,首先需要设置3D变形属性,具体如下:
perspective属性:在3D变换中,将人眼作为视点,屏幕作为成像面,如图6.11所示。图中d表示视点与成像面之间的距离,即perspective的值。perspective属性的语法格式如下所示:perspective:none|像素值;二、变形transformperspective属性值≤0时,不产生透视效果;perspective属性值>0时,属性值越小透视效果越明显,属性值越大透视效果越不明显。perspective属性还可以和translateZ(z)函数一起使用,如图6.15所示物体与成像面之间的距离z就是我们通常所设置的z轴方向的偏移量translateZ(z)。在d值确定的情况下,当z>0时,物体在成像面和视点之间,物体成像>物体实际大小;当z<0时,物体在成像面之后,物体成像<物体实际大小。在3D变形中,当给元素设置perspective属性时,可以激活一个3D空间。除此之外,在3D变形的函数中的perspective()也可以激活3D空间。两者的区别是,perspective属性应用在所有变形元素的父对象上;perspective()函数应用在当前变形的元素上,可以与其他tansform函数一起使用。二、变形transform二、变形transformperspective-origin属性:perspective-origin属性用来设置视点投射在成像面平面上的位置,如图6.12所示,其语法格式如下所示:perspective-origin:x-axisy-axis;其中x-axis和y-axis分别用来设置视点在x轴和y轴上的位置,其属性值可以是像素值、百分比或表示方位的词(left、right、center、top、bottom),其默认值为50%,即其父对象的中心点。perspective-origin属性需要与perspective属性结合起来使用,应用在其父对象上,以便将视点移至元素的中心以外位置。当视点位置变换时,投影位置也随之变换。二、变形transformbackface-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)定义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转换,仅用于设置Z轴的旋转角度perspective()定义3D视距(2)3D变形方法
3D变形的方法与2D变形的方法类似,如下表所示:表6-13D变形的方法二、变形transform例6-7扑克牌翻转总结提升PART04总结提升:动画animation
CSS3不仅可以支持过渡transition和变形transform,还提供了animation属性支持动画。相对于过渡和变形,animation动画可以重复使用,制作复杂的动画效果,还可以将动画应用在不同的元素之上。使用Animation属性的一般流程主要包括2个步骤:定义关键帧、设置动画属性。总结提升:动画animation
1、关键帧@keyframes@keyframes规则用于创建动画关键帧。@keyframes的实质就是设定某个时间点的CSS样式。@keyframes规则语法格式如下@keyframesidentifier{0%{/*CSS样式*/}
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024微股东众筹入股教育培训机构入股协议2篇
- 2024版本个人挂靠建筑业务协议模板版B版
- 2025标识技术升级改造项目采购合同3篇
- 2024校园交通安全管理合同
- 浙大城市学院《信息化开发与应用》2023-2024学年第一学期期末试卷
- 工商财税知识培训课件
- 实体店装修知识培训课件
- 评优评先制度的建立与运行计划
- 2024年锅炉销售渠道合作协议
- 环保行动学生实践模板
- (高清版)DZT 0284-2015 地质灾害排查规范
- 驾驶员劳务派遣车辆管理方案
- 山东省济南市市中区2022-2023学年二年级上学期期末数学试卷
- CSCO胃癌诊疗指南转移性胃癌更新解读
- 充电桩建设项目预算报告
- 《网络安全等级保护条例》
- 宜昌市夷陵区2023-2024学年八年级上学期期末数学评估卷(含答案)
- 企划品宣部人员架构及职责
- 高效复习+期末动员+高二上学期考前动员主题班会
- 铅锌矿资源的勘查与储量评估
- 非遗传统手工艺教学总结
评论
0/150
提交评论