CSS 元素淡入淡出效果实现教程 - 使用 transition 和 opacity 属性 - 常规

要实现 CSS 元素的淡入淡出效果，可以使用 CSS3 的 transition 和 opacity 属性。具体步骤如下：

设置元素的 opacity 属性为 0，表示元素初始状态为不可见。
使用 transition 属性设置元素的过渡效果，包括过渡时间、过渡方式等。
当元素需要显示时，将 opacity 属性设置为 1，从而使元素淡入显示。
当元素需要隐藏时，将 opacity 属性设置为 0，从而使元素淡出隐藏。

下面是一个示例代码，实现了一个 div 元素的淡入淡出效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    .fade {
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }
    .fade.in {
      opacity: 1;
    }
  </style>
</head>
<body>

  <div class='fade'>Hello World!</div>

  <script>
    // 淡入
    document.querySelector('.fade').classList.add('in');
    // 淡出
    document.querySelector('.fade').classList.remove('in');
  </script>

</body>
</html>

在这个例子中，我们定义了一个名为 fade 的 CSS 类，其中 opacity 属性为 0，表示元素初始状态为不可见。我们还使用了 transition 属性，设置了元素的过渡效果，过渡时间为 1 秒，过渡方式为 ease-in-out。

当我们需要显示元素时，通过 JavaScript 给元素添加一个名为 'in' 的 CSS 类，这个类中的 opacity 属性为 1，表示元素淡入显示。当我们需要隐藏元素时，通过 JavaScript 删除元素的 'in' 类，这个类中的 opacity 属性为 0，表示元素淡出隐藏。

需要注意的是，CSS3 的 transition 和 opacity 属性可能不兼容一些旧版本的浏览器，我们需要根据具体情况进行兼容处理。

CSS 元素淡入淡出效果实现教程 - 使用 transition 和 opacity 属性