第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本学期不参与考核,因此请通过课本自行了解。


点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月29日

热门专题

昆明综合高中|昆明综合高中
昆明综合高中
小程序开发|微信小程序,小程序开发,小程序,小程序制作,微信小程序开发,小程序公司,小程序开发公司,分销,三级分销系统,分销系统
小程序开发
云南巨榕教育投资集团有限公司|云南巨榕教育投资集团有限公司,巨榕教育集团,巨榕教育
云南巨榕教育投资集团有限公司
大理科技管理学校|大理科技管理学校,大理科技,大理科技中等职业技术学校,大理科技管理中等职业技术学校,大理科技学校
大理科技管理学校
卓越综合高中|卓越综合高中
卓越综合高中
安徽开放大学|安徽开放大学报名,安徽开放大学报考,安徽开放大学,什么是安徽开放大学,安徽开放大学学历,安徽开放大学学费,安徽开放大学报名条件,安徽开放大学报名时间,安徽开放大学学历,安徽开放大学专业
安徽开放大学
云南综合高中|云南综合高中
云南综合高中
易捷尔高职单招|易捷尔高职单招,易捷尔高职单招培训,单招分数线,单招录取分数线,高职单招学校分数线
易捷尔高职单招

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部