CSS3点击按钮实现背景渐变动画效果

CSS3点击按钮实现背景渐变动画效果的步骤如下：

1. 编写HTML代码

首先，我们需要在HTML代码中添加一个按钮元素，示例如下：

<button class="btn">点击我</button>

2. 定义CSS样式

然后，在CSS样式文件中，我们需要定义按钮的基本样式，以及按钮被点击时的动画效果。具体步骤如下：

定义按钮基本样式

.btn {
  display: inline-block;
  padding: 12px 30px;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  color: #fff;
  border-radius: 8px;
  border: none;
  background-color: #f59f00;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

这里我们定义 .btn 类的样式，包括 padding 、字体大小、字体阴影、边框、背景颜色等基本样式，还设置了 border-radius 来使按钮的圆角更加圆滑，并设置了 transition 属性来实现点击时的渐变动画效果。

定义按钮点击样式

.btn:active {
  background-image: linear-gradient(180deg, #f59f00 0%, #c83700 100%);
}

这里定义了按钮在被点击时的样式，使用了 CSS3 渐变函数 linear-gradient 来实现从 #f59f00 到 #c83700 的渐变效果。

3. 示例演示

以下是两个简单的例子，演示了如何实现按钮点击时的背景渐变动画效果：

示例一：

<button class="btn">点击我</button>

.btn {
  display: inline-block;
  padding: 12px 30px;
  font-size: 18px;
  text-align: center;
  color: #fff;
  border-radius: 8px;
  border: none;
  background-color: #f59f00;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.btn:active {
  background-image: linear-gradient(180deg, #f59f00 0%, #c83700 100%);
}

示例二：

<button class="btn">点击我</button>

.btn {
  display: inline-block;
  padding: 12px 30px;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  color: #fff;
  border-radius: 8px;
  border: none;
  background-color: #9b4dca;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.btn:active {
  background-image: linear-gradient(180deg, #9b4dca 0%, #4d2c91 100%);
}

在示例二中，我们使用了不同的背景颜色，并进行了相应的更改。