第13章-CSS-3-0动画效果.pptVIP

13.1CSS3.0实现元素变换效果;缩放和翻转变形

设置transform属性值为scale()函数，即可实现网页元素的缩放和翻转效果。scale()函数用于定义网页元素在二维空间的缩放和翻转效果。scale()函数的语法如下。

transform:scale(x,y);

实战练习——实现网页元素的缩放和翻转

移动变形

设置transform属性值为translate()函数，即可实现网页元素的移动。translate()函数用于定义网页元素在二维空间的偏移效果。translate()函数的语法如下。

transform:translate(x,y);

实战练习——实现网页元素的移动;倾斜变形

设置transform属性值为skew()函数，即可实现网页元素的倾斜效果。skew()函数用于定义网页元素在二维空间中的倾斜变换，skew()函数的语法如下。

transform:skew(angleX,angleY);

实战练习——实现网页元素的倾斜效果

13.1.6矩阵变形

设置transform属性值为matrix()函数，即可实现网页元素的矩阵变形。matrix()函数用于定义网页元素在二维空间的矩阵变形效果，matrix()函数的语法如下。

transform:matrix(m11,m12,m21,m22,x,y);

实战练习——实现网页元素的矩阵变形效果;;

13.2CSS3.0实现元素过渡效果;transition-duration属性——设置过渡时间

transition-duration属性用于设置动画过渡过程中需要的时间，该属性的语法如下。

transition-duration:time;

实战练习——设置网页元素变形过渡时间

transition-delay属性——设置过渡延迟效果

ransition-delay属性用于设置动画过渡的延迟时间，该属性的语法如下。

transition-delay:time;

实战练习——设置网页元素变形过渡延迟时间;transition-timing-function属性——设置过渡方式

transition-timing-function属性用于设置动画过渡的速度曲线，即过渡方式。该属性的语法如下。

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

实战练习——设置网页元素变形过渡方式

制作动态选项卡

在前面学习了CSS3.0的变换属性transform和过渡属性transition，通过将这两种属性相结合，在网页中能够轻松的实现元素变换过渡的动画效果，从而有效地增加网页的交互性。本节将带领读者完成一个动态选项卡效果的制作，注意学习transform属性和transition属性的结合使用。

实战练习——制作动态选项卡

;

13.3CSS3.0实现元素动画效果;animation属性——实现元素动画效果

在CSS3.0中新增了专门用于实现动画效果的animation属性，通过该属性可以把一个或多个关键帧动画绑定到元素上，从而实现更加复杂的动画效和果。

animation:namedurationtiming-functiondelayiteration-countdirection;

实战练习——为元素绑定多个关键帧动画

制作交互导航菜单动画效果

CSS3.0中新增的用于创建关键帧动画的@keyframes和animation属性虽然目前还没有得到浏览器的广泛支持，但是其所能够实现的动画效果能够让我们领略到CSS3.0的强大功能。在本节中将综合使用本章中所介绍的transition属性、animation属性和@keyframes规则制作交互导航菜单效果。

实战练习——制作交互导航菜单动画效果

;

13.4本章小结