CSS 隐藏元素，5秒后显示

在本文中，我们将介绍如何使用CSS隐藏元素，并在5秒后将其显示出来。

阅读更多：CSS 教程

CSS隐藏元素

CSS提供了多种方式来隐藏元素，常用的方式是使用display和visibility属性。

使用display属性

display属性可以控制元素的显示方式，包括显示、隐藏和布局方式。其中，display:none;可以完全隐藏元素，并且不会占用页面空间。

示例代码如下：

.hide {
  display: none;
}

使用visibility属性

visibility属性可以控制元素的可见性，包括显示、隐藏，但隐藏的元素仍会占用页面空间。

示例代码如下：

.hide {
   visibility: hidden;
}

5秒后显示元素

要在5秒后显示隐藏的元素，我们可以使用JavaScript的setTimeout函数来实现。

示例代码如下：

<html>
  <head>
    <style>
      .hide {
        display: none;
      }
    </style>
    <script>
      setTimeout(function() {
        document.getElementById("hiddenElement").style.display = "block";
      }, 5000);
    </script>
  </head>
  <body>
    <div class="hide" id="hiddenElement">
      这是一个隐藏的元素
    </div>
  </body>
</html>

在上述示例中，我们首先使用CSS的display属性将元素隐藏起来，然后通过JavaScript的setTimeout函数在5秒后将元素的display属性设置为”block”，以实现元素的显示。