要在CSS中实现平滑过渡动画,你可以使用CSS transition属性,并结合一些其他的CSS属性。下面是一个基本的例子:
/* 定义按钮元素的背景颜色和过渡时间 */
button {
background-color: blue;
transition: background-color 0.5s ease;
}
/* 定义hover状态下按钮的背景颜色 */
button:hover {
background-color: red;
}
在这个例子中,当鼠标悬停在按钮上时,按钮的背景颜色将从蓝色平滑地过渡到红色,过渡时间为0.5秒,过渡效果为"ease"(缓和)。
除了背景颜色之外,你还可以使用CSS transition属性来定义其它CSS属性的过渡效果,例如:颜色、大小、边框等。
此外,你还可以使用CSS animation属性来创建更复杂的动画效果,但是它需要更多的CSS代码和关键帧(keyframes)定义。