要创建渐变效果的过渡动画,你可以使用CSS的transition属性结合使用CSS的background属性和linear-gradient函数。下面是一个示例:

HTML代码:
html

CSS代码:
css
.box {
width: 200px;
height: 200px;
background: linear-gradient(to right, yellow, red);
transition: background 0.5s ease;
}

.box:hover {
background: linear-gradient(to right, red, yellow);
}

在上面的示例中,我们创建了一个名为"box"的div元素,并设置了宽度和高度为200px。我们使用linear-gradient函数创建了一个水平渐变的背景,从黄色到红色。然后,我们使用transition属性将背景颜色设置为过渡效果,过渡时间为0.5秒,过渡速度为ease。

在:hover伪类中,我们将背景颜色设置为另一个线性渐变,从红色到黄色。当鼠标悬停在盒子上时,将会触发这个过渡效果。

你可以根据自己的需要调整渐变的颜色和过渡的属性,以创建其他类型的渐变效果的过渡动画。