css怎么使div几秒后消失

CSS是一种用于网页设计中实现样式和布局的技术，其中一个常见的应用场景是要求某个元素消失或出现。在以下例子中，我们将使用CSS来控制一个DIV元素在几秒后自动消失。

<code>
<div class="message">这是一条消息</div>

<style>
  .message {
    background-color: yellow;
    padding: 10px;
    border: 1px solid black;
    text-align: center;
    margin-bottom: 20px;
  }

  .hidden {
    display: none;
  }
  
  .message.show {
    animation: fadeOut 2s ease forwards;
  }
  
  @keyframes fadeOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      display: none;
    }
  }
</style>

<script>
  setTimeout(function() {
    document.querySelector('.message').classList.add('show');
  },3000);
</script>
</code>

如上所示，我们首先创建了一个包含消息的DIV元素，并为其定义样式类“message”。接着，我们定义了一个名为“hidden”的样式类，其作用是将元素的显示状态设置为“none”，从而隐藏该元素。此类样式将在消息消失时使用。

接下来，我们定义了一个叫做“show”的样式类，会将元素使用CSS动画逐渐从透明度为1到0的状态，以便它能够平滑地消失。我们定义了一个CSS动画，以支持这个转换的效果。

最后，我们使用JavaScript中的setTimeout函数来延迟三秒钟（即3000毫秒）后，将样式类“show”添加到包含消息的DIV元素中。当样式应用时，元素将会开始使用CSS动画效果逐渐消失。

总之，创造这种自动隐藏元素的方法需要使用CSS和JavaScript。我们可以使用CSS来创建透明度效果，而JavaScript可用于在页面加载后更改元素样式。这个技术可用于各种网页设计中的需求，如在用户填写表单后自动隐藏问候消息、在广告中自动隐藏不想接受的内容等等。