CSS 过渡如何与线性渐变背景按钮配合使用？

CSS 过渡（transition）可以为元素的属性添加动画效果，使页面变得更加生动。配合线性渐变背景（linear-gradient）效果，可以创建出精美的按钮样式。

以下是一个使用CSS过渡和线性渐变背景的按钮示例：

/* 按钮样式 */
.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #ffffff;
  background: linear-gradient(to right, #ff8a00, #da1b60);
  border-radius: 5px;
  transition: background 0.3s ease;
}

/* 鼠标悬停时的效果 */
.button:hover {
  background: linear-gradient(to right, #da1b60, #ff8a00);
}

以上代码片段中，.button 类定义了按钮的基本样式。其中，background 属性使用了线性渐变背景，从左边的 #ff8a00 到右边的 #da1b60。

transition 属性用于指定过渡效果的属性和持续时间。在这个示例中，我们希望按钮的背景颜色在0.3秒内平滑过渡。

.button:hover 选择器用于定义鼠标悬停时的样式。这里我们将线性渐变背景的开始和结束颜色交换，实现了一种颜色渐变的动画效果。

你可以在 HTML 中使用以下代码将按钮添加到页面中：

<button class="button">Click Me</button>

该按钮将应用上述 CSS 样式，并在悬停时产生渐变效果。

希望以上介绍对你有所帮助！