css背景颜色渐变动画

CSS背景颜色渐变动画可以通过关键帧（keyframes）来实现。关键帧允许我们在动画序列中定义中间步骤的样式。通过指定不同的背景位置，我们可以创建出渐变效果。例如，我们可以使用线性渐变（linear-gradient）函数来定义背景颜色，并在关键帧中指定不同的背景位置来实现动画效果。以下是一个示例代码：

body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  height: 100vh;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

在这个示例中，我们使用线性渐变函数定义了一个背景颜色渐变，然后通过关键帧动画（@keyframes）来控制背景位置的变化。在动画序列中，我们指定了三个关键帧，分别是0%、50%和100%。在每个关键帧中，我们通过改变背景位置来实现颜色渐变的动画效果。这个动画会以15秒的持续时间无限循环播放。
#### 引用[.reference_title]
- *1* [纯CSS实现背景色渐变](https://blog.csdn.net/qq_45907365/article/details/130564982)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [纯css实现背景颜色渐变动画](https://blog.csdn.net/hunter_97/article/details/120862053)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [css-背景渐变色动画](https://blog.csdn.net/ZhanShenvsDiHuang/article/details/124422863)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]