css制作消息

CSS 制作消息框

使用CSS可以轻松创建各种风格的消息框，包括提示、警告、错误和成功消息。以下是几种常见的实现方法：

基础消息框样式

.message {
  padding: 12px 20px;
  margin: 10px 0;
  border-radius: 4px;
  font-family: Arial, sans-serif;
}

不同类型消息样式

.info {
  background-color: #e7f4fe;
  border-left: 6px solid #2196F3;
}

.success {
  background-color: #ddffdd;
  border-left: 6px solid #4CAF50;
}

.warning {
  background-color: #ffffcc;
  border-left: 6px solid #ffeb3b;
}

.error {
  background-color: #ffdddd;
  border-left: 6px solid #f44336;
}

带关闭按钮的消息框

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  这是一个可关闭的消息框
</div>

.alert {
  position: relative;
  padding: 20px;
  background-color: #f44336;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
}

动画效果消息框

@keyframes slideIn {
  from {transform: translateX(100%);}
  to {transform: translateX(0);}
}

.animated-message {
  animation: slideIn 0.5s forwards;
}

响应式消息框

@media screen and (max-width: 600px) {
  .message {
    width: 100%;
    padding: 10px;
    font-size: 14px;
  }
}

这些CSS样式可以根据具体需求组合使用，通过调整颜色、边框、阴影等属性创建不同视觉效果的消息提示框。实际应用中通常需要配合JavaScript来实现动态显示和隐藏功能。