css + js 超好看的消息提示

您可以使用纯CSS创建一个简单的消息提示框，然后用JavaScript来显示或隐藏它。以下是一个例子：

HTML:

<div id="message" class="message">这是一个超好看的消息提示！</div>
<button id="showMessage">显示消息</button>
<button id="hideMessage">隐藏消息</button>

CSS:

.message {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color: #1976d2;
  color: white;
  padding: 15px;
  border-radius: 5px;
  opacity: 0;
  transition: all 0.3s ease;
}
 
.message.visible {
  display: block;
  opacity: 1;
}

JavaScript:

document.getElementById('showMessage').addEventListener('click', function() {
  var message = document.getElementById('message');
  message.classList.add('visible');
});
 
document.getElementById('hideMessage').addEventListener('click', function() {
  var message = document.getElementById('message');
  message.classList.remove('visible');
});

这个例子中，.message 类定义了消息提示的基本样式，并且默认不显示（display: none）。当用户点击 "显示消息" 按钮时，会添加一个 .visible 类，使消息框显示并渐变出现。点击 "隐藏消息" 按钮则会移除 .visible 类，消息框会渐变消失。这个例子展示了如何使用CSS和JavaScript来创建简单的UI交互效果。