基本信息
文件名称:网页设计与开发(HTML5+CSS3) 课件 项目8 利用CSS3制作网页特效.pptx
文件大小:5.31 MB
总页数:45 页
更新时间:2025-06-28
总字数:约5.03千字
文档摘要

项目8利用CSS3制作网页特效录定义平移效果定义缩放效果定义倾斜效果定义2D旋转效果

050607目录定义变形原点定义3D旋转效果定义过渡效果08设置过渡效果持续时间

0910目录制作过渡效果速度曲线制作CSS3动画效果

项目描述前面的项目制作的网页基本是静态效果,在传统网页设计中,一般使用JavaScript脚本或者Flash来制作网页动态特效,而CSS3提供了对动画的强大支持,可以实现变形、过渡、动画等效果,大大降低了制作网页特效的难度。本项目利用CSS3的这些功能制作一个“旋转的3D相册”页面。

项目效果图

知识储备

知识目标理解并掌握transform(变形)属性的用法和意义。掌握transition(过渡)属性的用法和意义。010203掌握动画属性及属性对应的不同属性值的用法和意义。

定义平移效果01

任务描述利用CSS3中transform属性的translate()方法定义盒子模型移动后的坐标,实现元素平移效果。平移后的效果如右图所示。

知识点拨?transform01transform是CSS3新增的属性,可以实现元素的变形效果,如平移、倾斜、缩放及翻转等。?translate()方法02translate()方法能够重新定义元素的坐标,实现平移效果,该方法包含两个参数,分别用于定义X轴和Y轴坐标,基本语法格式如下。transform:translate(x-value,y-value);在上面的语法格式中,x-value指元素在水平方向上移动的距离,y-value指元素在垂直方向上移动的距离,第二个参数可省略,省略后取默认值0,当值为负数时,表示元素向反方向移动。

定义缩放效果02

任务描述利用CSS3中transform属性的scale()方法实现盒子模型放大1.5倍的效果。原效果和放大1.5倍后的效果如右图所示。原效果放大1.5倍后的效果

知识点拨在CSS3中,可以利用transform属性的scale()方法实现元素的缩放效果,缩放是指“缩小”和“放大”的意思。scale()方法与translate()方法类似,用法如下。(1)scaleX(x):元素仅在水平方向上缩放(X轴缩放)。(2)scaleY(y):元素仅在垂直方向上缩放(Y轴缩放)。(3)scale(x,y):元素在水平方向和垂直方向上同时缩放(X轴和Y轴同时缩放)。其中,参数x表示元素在X轴方向上的缩放倍数,参数y表示元素在Y轴方向上的缩放倍数。

定义倾斜效果03

任务描述利用CSS3中transform属性的skew()方法实现盒子模型倾斜的效果,如右图所示。任务3效果

知识点拨?skew()方法01利用transform属性的skew()方法可以实现元素的倾斜效果,其用法和translate()、scale()方法类似,基本语法格式如下。transform:skew(x,y);在上面的语法格式中,x和y分别代表相对于X轴和Y轴倾斜的角度,如果省略了第二个参数,则其取默认值0。

定义2D旋转效果04

任务描述利用CSS3中transform属性的rotate()方法实现素材图片在2D空间中旋转的效果。旋转后的效果如右图所示。任务4效果

知识点拨利用transform属性的rotate()方法能够实现元素的旋转效果,主要在2D空间中进行操作,该方法中的参数允许出现负值,这时元素将进行逆时针旋转,基本语法格式如下。transform:rotate(角度值);在上面的语法格式中,如果角度值为正值,则元素按照顺时针旋转,否则,按照逆时针旋转。

定义变形原点05

任务描述利用transform-origin属性更改元素变形原点实现元素变形效果。变形后的效果如右图所示。任务5效果图

知识点拨?transform-origin属性01通过transform属性可以实现元素的平移、缩放、倾斜及旋转效果,这些变形操作是以元素的原点作为参照的。在默认情况下,元素的原点在X轴和Y轴的50%位置,如果需要更改这个原点,就可以使用transform-origin属性,其基本语法格式如下。transform-origin:x-axisy-axisz-axis;在上面的语法格式中,每个属性值都代表一个偏移量,具体描述如下表所示。

定义3D旋转效果06

任务描述利用rotateX()、rotateY()、rotateZ()、translateZ()及perspective属性,制作一个可以实现3D旋转的“禁毒宣传标语”。旋转前后的效果分别如右图所示。旋转前的效果旋转后的效果

知识点拨?rotateX()01rotateX()函数用于在3D空间中使元素沿X轴旋转?。它接受一个角度值作为参数,用于指定旋转的角度。当参数为正值时,元