第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本学期不参与考核,因此请通过课本自行了解。
发表评论 取消回复