前端入门part20过渡模块

过渡模块

过渡效果三要素

• 一定有属性发送变化；
• 必须告诉系统哪个属性需要执行过渡；
• 必须告诉系统过渡效果持续时间；

当有多个属性需要同时执行过渡时：

简单练习

要求

由第一幅图渐变为第二幅图：

问题分析

将每一个文字放置在一个标签中，在鼠标悬停时，扩大标签margin属性即可；

代码如下：

编写过渡的套路

• 不要管过渡，先编写基本界面；
• 修改我们认为需要修改的属性；
• 再回过头 去给被修改元素的属性添加过渡即可；

复杂练习之手风琴效果

问题需求

初始效果

当鼠标悬停在某一个图片上面时，底片变大，其他图片变小

问题分析

• 设置ul中6个不同的li，每个li中加入图片，设置初始样式；
• 当鼠标悬停时，先让所有的li都变小；
• 在设置此时鼠标所在li使之变大；（优先级更高）

代码如下

效果图

初始状态

鼠标悬停后