要创建CSS过渡效果,需要使用CSS3的transition属性。transition属性用于指定一种CSS属性从一种状态过渡到另一种状态所需的时间、速度曲线和延迟。通常,过渡效果会在鼠标悬停或点击事件时触发。下面是一个简单的示例代码:
/*在元素上添加过渡效果*/
div {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s ease-in-out;
}
/*鼠标悬停时改变元素的宽度*/
div:hover {
width: 200px;
}
在上面的示例中,当鼠标悬停在div元素上时,它的宽度将从100px过渡到200px,过渡效果的时间为2秒,速度曲线为ease-in-out。
关键词解释: