第9章 CSS动效

第9章 CSS动效

本章要内容包括：

通过本章的学习，掌握CSS中变换、过渡、动画的基本知识，实现用户与网页之间的交互动效。

l 变换transform

l 过渡transition

l 动画animation

1、变换transform

通过CSS中的transform属性，可以对网页元素进行位移、旋转、缩放、倾斜等变换。

translate函数用于实现网页元素的位移变换

transform:translate(tx[,ty]);

rotate函数用于实现网页元素围绕自身的中心点旋转变换

transform:rotate(angle|0);

rotate的参数可以是任意角度，或者是0。角度可以使用deg、grad、rad、turn作为单位。其中deg是最常使用的单位

角度为正数时，网页元素顺时针旋转；角度为负数时，网页元素逆时针旋转

transform:rotate(10deg);

transform:rotate(-10deg);

scale函数用于实现网页元素缩放变换

transform: scale(sx[,sy]);

sx和sy表示倍数，后面不需要设置单位。

如果scale函数只设置了一个参数，那么它表示水平方向和垂直方向的缩放倍数。

2、过渡 transition

通过CSS中的transition属性，可以实现在一定的时间之内，网页元素从一组CSS属性变换到另一组CSS属性的动画过程。

可以通过以下属性，分开设置各过渡方面的属性

通过transition属性的简写方式进行过渡的设置，是更为常见的方式。

#photo img{

padding:10px;

background-color:#FFF;

transition:all 0.5s;

}

#photo img:hover{

transform:rotate(0);

}

速度函数通过一些预设的关键字进行设置，也可以通过三次贝塞尔曲线函数进行设置

可以通过以下属性，分开设置各过渡方面的属性

3、动画animation

通过CSS中的animation属性，可以实现在多种状态之间转换的动效，每一种状态也被称为一个关键帧。在制作过程中，需要先通过@keyframes定义包含一系列关键帧的动画，然后再将动画应用到网页元素上。

动画 animation本学期不参与考核，因此请通过课本自行了解。