css制作消息

使用CSS制作消息框

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

基础消息框样式

.message {
  padding: 10px 15px;
  margin: 10px 0;
  border-radius: 4px;
  font-family: sans-serif;
}

不同类型消息框

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

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

.warning {
  background-color: #fff8dd;
  border-left: 5px solid #ff9800;
}

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

添加关闭按钮

.closebtn {
  margin-left: 15px;
  color: #888;
  font-weight: bold;
  float: right;
  cursor: pointer;
}

动画效果消息框

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

.animated {
  animation: fadeIn 0.5s;
}

悬浮效果

.hover-effect:hover {
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

完整HTML示例

<div class="message info">
  <span class="closebtn">&times;</span>
  <strong>提示!</strong> 这是一条信息消息。
</div>

<div class="message success">
  <span class="closebtn">&times;</span>
  <strong>成功!</strong> 操作已成功完成。
</div>

响应式设计考虑

@media screen and (max-width: 600px) {
  .message {
    width: 100%;
    margin: 10px 0;
  }
}

这些样式可以根据具体需求进行调整，如修改颜色、大小、边框样式等，以适应不同的设计风格。