网页设计与制作 课件 20 制作鼠标悬停时过渡变形效果.pptxVIP

;复习巩固;CSS3新增了过渡、变换和动画三个属性，可以实现网页中文字或图像的旋转、缩放、移动、过渡等动画效果，从而使得网页设计制作过程中动画或者特效的实现变得更加简单。

本任务学习过渡和变换属性，实现鼠标悬停时图片过渡变形。;学习内容;;;;;;;;;;例1：单个属性变化（只有一个属性产生过渡效果）;例2：多个属性变化-单独设置;例3：多个属性变化-all;.box{

transition:all1s;

}

.box:hover{

transform:scale(1.5);

}

;使用变形+过渡实现一些动态效果

;结构设计

页面中包含4个区域，每个区域包含黑色背景层，白色圆环框线及图片。

;样式控制

4个盒子原始外观效果一致，但是每个盒子当鼠标悬停在黑色区域上时，显示对应的过渡变形效果，且要求变形时溢出内容隐藏

;内容小结;作业