css3过渡属性属性名:transition
CSS3的transition
属性用于设置元素的过渡效果,它可以使得在改变元素的CSS属性时产生平滑的过渡效果,而不是立即变化。
transition
属性通常由四个部分组成:
property
: 定义应用过渡效果的CSS属性名。duration
: 定义过渡效果的持续时间。timing-function
: 定义过渡效果的速度曲线。delay
: 定义过渡效果开始前的延迟时间。
举例来说,如果你想要当鼠标悬停在一个元素上时,改变元素的颜色,并且使用300毫秒完成过渡,可以这样写:
div {
background-color: blue;
transition: background-color 300ms ease-in-out;
}
div:hover {
background-color: red;
}
在这个例子中,当鼠标悬停在div
上时,背景色从蓝色平滑地过渡到红色,过渡的时间是300毫秒,速度曲线是ease-in-out
。
评论已关闭