在Web開發過程中，消息提示是不可避免的一項需求。稍微有一點界面設計經驗的開發者都會知道，友好的提示信息對于用戶體驗至關重要。今天我們來學習一下如何用CSS實現仿消息提示。

/* 定義一個消息容器 */
.message {
position: fixed; /* 定位到屏幕固定位置 */
left: 50%; /* 水平居中 */
bottom: 0; /* 緊貼底部 */
width: 300px; /* 寬度 */
padding: 10px 20px; /* 內邊距 */
margin-left: -150px; /* 負值使其水平居中 */
box-sizing: border-box; /* 計算邊框大小時包括padding和border */
font-size: 16px; /* 字體大小 */
color: #fff; /* 字體顏色 */
background-color: #333; /* 背景顏色 */
text-align: center; /* 文字居中 */
opacity: 0; /* 初始不可見 */
transition: opacity .3s ease-in-out; /* 過渡效果 */
}
.message.show {
opacity: 1; /* 可見 */
}

上述代碼定義了一個class為message的容器，包括位置、樣式等屬性。其中最重要的是`opacity`屬性，它控制了容器可見與否的狀態。

// 使用JavaScript動態添加消息提示
function showMessage(msg) {
var message = document.createElement('div');
message.className = 'message';
message.innerText = msg;
document.body.appendChild(message);
setTimeout(function() {
message.classList.add('show');
}, 100);
setTimeout(function() {
message.classList.remove('show');
setTimeout(function() {
message.remove();
}, 300);
}, 3000);
}
// 調用函數
showMessage('消息提示內容');

上述代碼定義了一個函數`showMessage`，根據傳入的消息內容動態創建一個class為message的容器，并設置它的初始不可見狀態。`setTimeout`函數是用來控制容器的可見與不可見狀態，并在3秒后將容器從頁面中移除。

通過以上代碼，我們已經可以實現一個類似于消息提示的效果。這個效果在頁面中應用的場景很多，例如：表單驗證、操作結果提示等。而且，由于使用了CSS實現動畫效果，所以整個過程顯得非常流暢，一點也不會影響用戶體驗。