《HTML5+CSS3网页设计与制作》课件_第11章 CSS 中的动画与特效.pptx

下载文档

0
0
约小于1千字
约 46页
2025-02-21 发布于广东
举报
版权申诉
保障服务

《HTML5+CSS3网页设计与制作》课件_第11章 CSS 中的动画与特效.pptx

1、本文档共46页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

第11章CSS中的

动画与特效;掌握CSS中变形、过度、动画三种特效的定义方式;本章任务;任务1CSS中的动画与特效—transform;任务描述;任务分析;基本语法;;基础案例操作;基础案例操作;基础案例操作;基础案例操作;基础案例操作;任务实现;任务实现;任务2CSS中动画与特效—transition;任务描述;任务分析;基本语法;基础案例操作;基础案例操作;布局代码如下：

divclass=boxenlargedurationdelay

延迟2S触发

/div

CSS代码如下：

/*延迟时间*/

.delay{

transition-delay:2s;/*设置动画过渡效果延迟2S播放*/

};布局代码如下：

divclass=boxmove-and-color

CSS代码如下：

/*对象移动并变色*/

.move-and-color{

position:relative;

left:40px;/*定义盒子的初始位置*/

transition-property:left,background-color;/*定义盒子的位置和背景色为动画属性*/

transition-duration:3s;/*定义过渡时长为3S*/

}

.move-and-color:active{/*定义盒子单击时，盒子位置和背景颜色的改变*/

left:350px;

background-color:#00008B;

};基本语法;任务实现;任务实现;任务3CSS中动画与特效—animation;任务描述;任务分析;基本语法;基本语法;基础案例操作;基础案例操作;基础案例操作;基础案例操作;基础案例操作;基础案例操作;任务实现;任务实现;任务4案例实战——纯CSS实现轮播图效果;任务描述;任务分析;任务实现;任务实现;总结;千里之行始于足下