CSS transistion:淡入背景色并在重置后恢复

在本文中，我们将介绍如何使用CSS过渡动画效果来实现一个淡入背景色的效果，并在重置后恢复原始状态。

阅读更多：CSS 教程

使用CSS transition属性实现动画效果

CSS过渡（transition）属性可以实现元素在一定时间内从一个状态平滑过渡到另一个状态的效果。我们可以使用transition的background-color属性来实现背景色的淡入效果。

.fade-background {
  background-color: white;
  transition: background-color 0.5s;
}

.fade-background:hover {
  background-color: lightblue;
}

在上述代码中，我们定义了一个名为.fade-background的样式类，设置初始的背景色为白色，并将过渡效果的时间设置为0.5秒。当鼠标悬停在具有.fade-background类的元素上时，背景色会从白色平滑地过渡到浅蓝色。

重置背景色，恢复原始状态

有时候我们希望在过渡效果结束后，背景色能自动恢复到初始状态。可以使用JavaScript来实现这一功能：

const elements = document.getElementsByClassName('fade-background');

for (let i = 0; i < elements.length; i++) {
  elements[i].addEventListener('transitionend', function() {
    this.classList.remove('active');
  });
}

在上述代码中，我们首先通过getElementsByClassName方法获取所有具有.fade-background类的元素。然后，我们使用addEventListener方法来监听transitionend事件，当过渡效果结束时触发。在事件处理程序中，我们使用classList.remove方法将.active类从元素的类列表中移除。

需要注意的是，我们还需要为.fade-background类添加一个.active类，用于表示过渡动画的结束状态。例如，在CSS中将背景色设置为浅蓝色并添加.active类：

.fade-background.active {
  background-color: lightblue;
}

这样，当过渡效果结束时，背景色会自动恢复到浅蓝色并移除.active类。

示例

下面是一个实际示例，演示了如何实现一个淡入背景色的效果，并在重置后恢复原始状态：

<!DOCTYPE html>
<html>

<head>
  <style>
    .fade-background {
      width: 200px;
      height: 200px;
      background-color: white;
      transition: background-color 0.5s;
      border: 1px solid black;
    }

    .fade-background:hover {
      background-color: lightblue;
    }

    .fade-background.active {
      background-color: lightblue;
    }
  </style>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const elements = document.getElementsByClassName('fade-background');

      for (let i = 0; i < elements.length; i++) {
        elements[i].addEventListener('transitionend', function() {
          this.classList.remove('active');
        });
      }
    });
  </script>
</head>

<body>
  <div class="fade-background"></div>
</body>

</html>

在这个示例中，当鼠标悬停在白色正方形上时，背景色会平滑地过渡到浅蓝色。当动画结束后，背景色会自动恢复为白色。这样，我们就实现了由淡入背景色到重置后恢复的效果。