过渡模块
过渡效果三要素
- 一定有属性发送变化;
- 必须告诉系统哪个属性需要执行过渡;
- 必须告诉系统过渡效果持续时间;
当有多个属性需要同时执行过渡时:
简单练习
要求
由第一幅图渐变为第二幅图:
问题分析
将每一个文字放置在一个标签中,在鼠标悬停时,扩大标签margin属性即可;
代码如下:
编写过渡的套路
- 不要管过渡,先编写基本界面;
- 修改我们认为需要修改的属性;
- 再回过头 去给被修改元素的属性添加过渡即可;
复杂练习之手风琴效果
问题需求
初始效果
当鼠标悬停在某一个图片上面时,底片变大,其他图片变小
问题分析
- 设置ul中6个不同的li,每个li中加入图片,设置初始样式;
- 当鼠标悬停时,先让所有的li都变小;
- 在设置此时鼠标所在li使之变大;(优先级更高)
代码如下
效果图
初始状态
鼠标悬停后