过渡模块的使用
例如:
- transition-property:width,background-color;(不是直接写在hover里)
- transition-duration:5s,5s;
- transition-timing-function(linear/ease/ease-in/ease-out/____控制速度)
- transition-deley
- 连写: transition:过度属性 过渡时长 运动速度 延迟时间(多个属性用逗号隔开)
- tips:
连写时可省略后面两个属性,因为只要编写了前面的两个参数就已经满足了过渡的三要素
如果多个属性运动的速度/延迟的时间/持续的时间都一样,可简写:transition:all 5s;
总结
编写过渡套路
1.不要管过渡, 先编写基本界面
2.修改我们认为需要修改的属性
3.再回过头去给被修改属性的那个元素添加过渡即可
注意区别:
ul:hover li{
width: 100px;
}
ul li:hover{
width: 460px;
()
