过渡模块
- 1.过渡三要素
1.1必须要有属性发生变化
1.2必须告诉系统哪个属性需要执行过渡效果
1.3必须告诉系统过渡效果持续时长
2.注意点
当多个属性需要同时执行过渡效果时用逗号隔开即可
transition-property: width, background-color;
transition-duration: 5s, 5s;
<style>
.box1{
width: 100px;
height: 100px;
background-color: rebeccapurple;
/*transition: width,3s;*/
/*告诉系统哪个属性需要执行过渡效果*/
transition-property: width,background-color;
/*告诉系统过渡效果持续的时长*/
transition-duration: 3s,2s;
}
/*.box2{
width: 100px;
height: 100px;
background-color: yellow;
transition: background-color, 3s;
}*/
/*:hover这个伪类选择器除了可以用在a标签上, 还可以用在其它的任何标签上*/
.box1:hover{
width: 500px;
background-color: greenyellow;
}
/*.box2:hover{
background-color: green;
}*/
</style>
<div class="box1"></div>
<div class="box2"></div>
- 过渡模块其余属性
-
transition-delay: 2s;告诉系统延迟多少秒之后才开始过渡动画 -
transition-timing-function: linear;告诉系统过渡动画的运动的速度类型- transition-timing-function属性取值
linear,ease,ease-in,ease-out,ease-in-out
速度类型
- transition-timing-function属性取值
-
- 过渡属性连写
- transition: 过渡属性 过渡时长 运动速度 延迟时间;
- 过渡连写注意点
2.1和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可
2.2连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素
2.3如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为
transition:all 0s;
- 编写过渡套路
1.1不要管过渡, 先编写基本界面
1.2修改我们认为需要修改的属性
1.3再回过头去给被修改属性的那个元素添加过渡即可
