Web前端开发案例教程第10章课件.pptx

1、第10章 CSS3动画德才兼备 知行合一 掌握通过transition属性生成过渡动画的方法；掌握通过transition属性生成2D和3D变形的方法；掌握通过animation属性创建关键帧生成动画的方法。动画属性2德才兼备 知行合一10.110.210.3过渡属性第10章 CSS3动画变形属性10.4案例10.1 过渡属性3德才兼备 知行合一第10章 CSS3动画 10.1 过渡属性4德才兼备 知行合一CSS3提供了强大的过渡属性，使元素从一种样式转变为另一种样式时添加效果，如颜色和形状的变换等。过渡属性包含一系列属性，主要包括transition-property、transition-

2、duration、transition-timing-function、transition-delay。下面通过表10-1列出这些属性的基本语法及属性值。10.1 过渡属性5德才兼备 知行合一表10-1 过渡属性属性名作用属性值 描述transition-property指定应用过渡效果的CSS属性名称none没有属性会获得过渡效果all所有属性都将获得过渡效果property定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔transition-duration定义过渡效果花费的时间time默认为0，常用单位是秒（s）或毫秒（ms）transition-timing-function

3、定义过渡效果的速度曲线ease平滑过渡linear线性过渡ease-in由慢到快ease-out由快到慢ease-in-out由慢到快再到慢cubic-bezier特殊的立方贝塞尔曲线效果transition-delay定义过渡效果延迟时间time默认值为0，常用单位是秒（s）或毫秒（ms）transition综合设置过渡的所有属性值property durationtiming-functiondelay按照各属性顺序一次设置四个参数值，属性顺序不能颠倒10.2 变形属性6德才兼备 知行合一第10章 CSS3动画 7德才兼备 知行合一 10.2 变形属性CSS3中，transform属性可以

4、实现对元素的变形效果，如移动、倾斜、缩放以及翻转等。通过transform属性的变形函数能对元素进行2D或3D变形。8德才兼备 知行合一 10.2 变形属性常用的四种2D变形语法格式。属性名值作用 描述transformtranslate(X,Y)基于X和Y坐标平移元素X表示水平移动的距离，Y表示垂直移动的距离scale(n1,n2)放大或缩小元素n1和n2表示基于元素的宽度和高度进行放大或缩小。大于1时为放大，小于1时缩小元素。第二个参数省略时，等于第一个参数值skew(angle,angle)倾斜元素两个angle分别表示在X轴和Y轴上倾斜的角度rotate(angle)旋转元素angle

5、表示旋转的角度，正数表示顺时针旋转，负数表示逆时针旋转表10-2 2D变形属性及设置9德才兼备 知行合一 10.2 变形属性3D变形语法格式。表10-3 3D变形属性及设置属性名值 描述transformtranslate3d(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 缩放变

6、形，通过给定一个 Y 轴的值scaleZ(z)定义 3D 缩放变形，通过给定一个 Z 轴的值rotate3d(x,y,z,angle)定义 3D 旋转rotateX(angle)定义沿 X 轴的 3D 旋转rotateY(angle)定义沿 Y 轴的 3D 旋转rotateZ(angle)定义沿 Z 轴的 3D 旋转perspective(n)定义 3D 变形元素的透视视图10德才兼备 知行合一 10.2 变形属性另外，在CSS3中还包含了一些其它变形的属性，通过这些属性可以设置不同的变形效果，具体如表10-4所示。表10-4 变形的其它属性属性名 描述transform-origin允许改变

7、被转换元素的位置transform-style规定被嵌套元素如何在3D空间中显示perspective规定3D元素的透视效果perspective-origin规定3D元素的底部位置backface-visibility定义元素在不面对屏幕时是否可见10.3 动画属性11德才兼备 知行合一第10章 CSS3动画12德才兼备 知行合一CSS3除了支持过渡和变形动画外，还可以通过animation属性创建帧动画，从而实现更为复杂的动画效果。animation属性与transition属性类似，都是通过改变元素的属性值来实现动画效果的。它们的区别在于，使用transition属性时只能通过指定属性的

8、开始值与结束值，然后在两个属性值之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画；而animation属性则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。10.3 动画属性13德才兼备 知行合一 10.3 动画属性1、定义关键帧例如，下面的代码定义了关键帧，共5帧，每帧中设置left和top属性，让它们的值改变，产生动画。keyframes ball 0%left:0;top:0;25%left:200px;top:0;50%left:200px;top:200px;75%left:0;top:200px;100%left:0;top:0;注意：定

9、义关键帧，并不能产生动画效果，还需要设置动画属性才行。14德才兼备 知行合一 10.3 动画属性2、设置动画效果动画属性包含一系列属性，主要包括animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction等属性。下面通过表10-5列出这些属性的基本语法及属性值。15德才兼备 知行合一 10.3 动画属性表10-5 动画属性属性名作用属性值 描述animation-name指定要应用的动画名称none不应用动画key

10、framename指定应用的动画名称，即keyframes定义的动画名称a n i m a t i o n-duration定义动画效果完成所需的时间time默认为0，常用单位是秒（s）或毫秒（ms）animation-timing-function定义动画效果的速度曲线ease平滑过渡linear线性过渡ease-in由慢到快ease-out由快到慢ease-in-out由慢到快再到慢cubic-bezier特殊的立方贝塞尔曲线效果animation-delay定义动画效果延迟时间time默认值为0，常用单位是秒（s）或毫秒（ms）a n i m a t i o n-iteration-co

11、unt定义动画的播放次数number播放次数infinite循环播放a n i m a t i o n-direction定义动画的播放方向normal默认值，动画每次都向前播放alternate第偶数次向前播放，第奇数次反方向播放animation综合设置动画的所有属性值namedurationtiming-functiondelayiteration-countdirection按照各属性顺序一次设置六个参数值，属性顺序不能颠倒10.4 案例16德才兼备 知行合一第10章 CSS3动画 10.4 案例17德才兼备 知行合一10.4.1 图片遮罩效果本案例使用CSS3 transition过

12、渡属性，使鼠标移动到图片上时，下拉出遮罩的效果。如图10-1和10-2所示。10.4 案例18德才兼备 知行合一10.4.2 图片翻转效果本案例使用CSS3 transition过渡属性和transform变形属性，使鼠标移动到图片上时，将图片翻转，显示另一张图片。如图10-3和10-4所示。10.4 案例19德才兼备 知行合一10.4.3 照片墙效果本案例使用CSS3 transition过渡属性和transform变形属性制作照片墙效果，照片随意摆放，当鼠标移动到每幅照片上时，将照片放大并垂直摆放，如图10-5所示。10.4 案例20德才兼备 知行合一10.4.4 魔方效果本案例使用CSS

13、3 transform变形属性和animation动画属性制作旋转的魔方效果，如图10-6所示。21德才兼备 知行合一本章小结21德才兼备 知行合一utransition过渡属性utransform变形属性uAnimation动画属性通过本章的学习，可以学会综合使用CSS3相关属性制作在网页中常用的动画效果。22德才兼备 知行合一实训101、利用transition过渡属性创建图片的切换效果，当鼠标移动图片上时，逐渐过渡到另一张图片，浏览效果如图10-7和10-8所示。23德才兼备 知行合一实训102、利用transition过渡属性和transform变形属性创建导航条翻转效果。当鼠标移上导航栏目时，栏目会发生翻转效果，浏览效果如图10-9和10-10所示。24德才兼备 知行合一实训103、利用transition过渡属性和transform变形属性创建扑克牌翻转效果。鼠标移到第一张图片时，产生图片围绕Y轴旋转的变形效果；鼠标移到第二张图片时，产生图片围绕X轴旋转的变形效果。浏览效果如图10-11所示。感谢您的观看！感谢您的观看！德才兼备 知行合一