第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实现轮播图效果;任务描述;任务分析;任务实现;任务实现;总结;千里之行始于足下