CSS3 带图标的消息提示框

原创已于 2025-06-27 15:21:19 修改 · 1.1k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-01 15:29:29 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 带图标的消息提示框</title>
<style>
/* 基础样式 */
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
}

/* 消息提示框容器 */
.alert-container {
width: 100%;
max-width: 500px;
}

/* 消息提示框基础样式 */
.alert {
position: relative;
padding: 15px 20px 15px 60px;
margin-bottom: 15px;
border-radius: 4px;
color: #fff;
font-size: 16px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
opacity: 0.9;
}

.alert:hover {
opacity: 1;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* 图标样式 */
.alert:before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
}

/* 不同类型的消息提示框 */
.alert-success {
background-color: #4CAF50;
border-left: 5px solid #388E3C;
}

.alert-success:before {
content: "\f058";
}

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

.alert-info:before {
content: "\f05a";
}

.alert-warning {
background-color: #FFC107;
border-left: 5px solid #FFA000;
color: #333;
}

.alert-warning:before {
content: "\f071";
}

.alert-danger {
background-color: #F44336;
border-left: 5px solid #D32F2F;
}

.alert-danger:before {
content: "\f057";
}

/* 关闭按钮 */
.close-btn {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
font-size: 20px;
opacity: 0.7;
}

.close-btn:hover {
opacity: 1;
}
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<div class="alert-container">
<div class="alert alert-success">
操作成功！您的请求已提交。
<span class="close-btn">×</span>
</div>

<div class="alert alert-info">
提示信息：系统将于今晚进行维护。
<span class="close-btn">×</span>
</div>

<div class="alert alert-warning">
警告：您有未保存的更改。
<span class="close-btn">×</span>
</div>

<div class="alert alert-danger">
错误：无法完成请求，请重试。
<span class="close-btn">×</span>
</div>
</div>


<div style="text-align: center; margin-top: 30px;">

</div>

<script>
// 添加关闭功能
document.querySelectorAll('.close-btn').forEach(btn => {
btn.addEventListener('click', function() {
this.parentElement.style.opacity = '0';
setTimeout(() => {
this.parentElement.style.display = 'none';
}, 300);
});
});
</script>
</body>
</html>