作用:让元素的样式慢慢的变化,常配合hover使用,增强网页交互体验
属性名:transition
常见取值:
- all 1s 所有能过渡的属性都过渡,过渡时间为1秒
- width 1s 只有width有过渡,过渡时间为1秒
- width 1s, background-color 2s; 只有width和bgc过渡,过渡时间分别为1秒和2秒
写法示例:
div {
width: 200px;
height: 200px;
background-color: red;
transition: width 1s, background-color 2s;
}
div:hover {
width: 800px;
background-color: blue;
}
注意点:
- 给过渡需要:默认状态和hover状态样式不同,才能有过渡效果
- transition属性给需要过渡的元素本身加。
- transition属性设置在不同状态中,效果不同
-
- ▶给默认状态设置,鼠标移入移出都有过渡效果
- ▶给hover状态设置,鼠标移入有过渡效果,移出没有过渡效果