作用:让元素的样式慢慢的变化,常配合hover
使用,增强网页交互的内容
属性名:transition
常见取值:
参数 | 取值 |
---|---|
过渡的属性 | all :所有能过渡的属性都过渡,比如填width ,则只有width能过渡 |
过渡的时长 | 数字+ s (秒) |
注意
- 只有默认状态和hover状态的样式不同,才能有过渡的效果
transition
属性给需要过渡的元素本身加transition
属性设置在不同状态中,效果是不同的,比如给hover
状态设置,则只有鼠标移入时,才有过渡效果
样例代码
.box{
width:200px;
height:200px;
background-color:pink;
/* 宽度200,悬停的时候宽度600,花费时间1秒钟 */
transition: width 1s, background-color 2s;
/* 过渡所有的属性,花费时间1秒钟 */
/* transition: all 1s; */
}
.box:hover{
width:600px;
background-color:red;
}