过渡有什么意义?
例如代码:
div{
height:100px;
width:100px;
background-color: red;
}
div:hover{
height:300px;
width:300px;
background-color: blue;
}
观察上面代码可知,当鼠标悬停在Div上的时候,div会立即放大三倍且颜色变成蓝色,注意,是立即
当我们在div的初始属性中设置了过渡模块后,可以使其有过渡效果
格式:
第一步,transition-property 属性规定应用过渡效果的 CSS 属性的名称
例如:transition-property:width; 就是指要对width加过渡效果
第二步: transition-duration 属性规定过渡的时间,弱不设置此项,将没有过渡效果,前提是设置
transition-property。
例如: transition-duration:3s; 就是指过渡效果的持续时间为3s,
当我们需要设置多个值的过渡的时候,不能单独设置,因为css是层叠的,我们设置多个,只有最后一个有效,例如将顶部代码三个值添加过渡3s的效果。代码如下
div{
width: 100px;
height: 100px;
background-color: red;
transition: width 3s,height 3s,background-color 3s;
}
div:hover{
width: 300px;
height: 300px;
background-color: blue;
}