css制作消息

CSS 制作消息样式

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

基础消息框样式

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

成功消息样式

.success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #3c763d;
}

错误消息样式

.error {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
}

警告消息样式

.warning {
  background-color: #fcf8e3;
  border-color: #faebcc;
  color: #8a6d3b;
}

信息消息样式

.info {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #31708f;
}

添加图标的消息框

可以通过伪元素或直接插入图标来增强视觉效果：

.message-with-icon {
  position: relative;
  padding-left: 40px;
}

.message-with-icon::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-size: contain;
}

动画效果消息

添加淡入或滑动动画效果：

.fade-in {
  animation: fadeIn 0.5s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

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

响应式消息框

针对不同屏幕尺寸调整样式：

@media (max-width: 768px) {
  .message {
    padding: 8px 15px;
    font-size: 14px;
  }
}

实际应用示例

HTML结构：

<div class="message success">
  操作成功完成！
</div>

<div class="message error fade-in">
  发生错误，请重试。
</div>

这些CSS样式可以根据具体需求进行组合和扩展，创建出各种美观实用的消息提示效果。