过渡
# 定义
过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换,像是 :hover (opens new window),:active (opens new window) 或者通过 JavaScript 实现的状态变化。
# 值
transition:xxx,xxx,xx,,xx
# 要过渡的属性
很简单就是元素的属性 比如width,, 如果多个就用逗号隔开,所有就写all
比如 transition:width 2s, color 2s;
# 花费时间
单位是秒 ,必须写单位
# 运动曲线
默认是ease(可以省略)
# 何时开始
单位是秒,必须写单位,可以设置延迟触发的时间,默认是0s
# 例子
div{
width: 500px;
height: 100px;
background-color: red;
transition:all 2s;
}
div:hover{
background-color: blue;
width: 300px;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
这样就会有一个渐变的过程了 在两秒呢
# 属性加在哪个元素
谁过渡加在谁的身上
编辑 (opens new window)
上次更新: 2021/08/13, 23:21:49