纯 CSS 和 JS 实现自动隐藏的提示框

本文将使用纯 CSS 和 JS 代码实现一个简单的提示框，并设置在显示 3 秒后自动隐藏。以下是代码示例：

**HTML 部分：**

<button id='btn'>点击弹出提示框</button>
<div id='msg'>这是一个提示框</div>

**CSS 部分：**

#msg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  background-color: #eee;
  border: 1px solid #999;
  border-radius: 5px;
  box-shadow: 0px 0px 10px #999;
  display: none;
}

**JS 部分：**

var btn = document.getElementById('btn');
var msg = document.getElementById('msg');

btn.onclick = function() {
  msg.style.display = 'block';
  setTimeout(function() {
    msg.style.display = 'none';
  }, 3000);
};

**解释：**

当点击按钮时，提示框的 display 属性会变为 block，即显示出来，然后设置一个计时器，在 3 秒后将提示框的 display 属性变为 none，即隐藏起来。

通过以上代码，我们可以轻松实现一个简单的自动隐藏提示框。你可以根据需要修改提示框的样式和显示时间。