在網頁制作中，我們經常需要添加提示框來引導用戶進行某些操作。而有時候，我們還需要在提示框上添加一個點擊事件，使其在用戶點擊后自動消失。下面，我們將介紹如何使用CSS來實現點擊后消失的提示框。

/* CSS代碼 */
#tip {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index: 999;
display: none; /* 初始狀態隱藏 */
}
#tip.show {
display: block; /* 點擊后顯示 */
animation: fadeOut 1s ease-in-out forwards;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
display: none; /* 動畫結束后隱藏 */
}
}

首先，我們創建一個ID為“tip”的元素，用于顯示提示框的內容。然后，我們將其樣式設置為固定定位并垂直居中，添加背景色、邊框和陰影效果，以便與頁面中的其他內容區分開來。此外，我們還將其初始狀態設置為隱藏。

接著，我們使用CSS3的animation屬性來實現提示框的點擊后消失。當用戶點擊提示框時，我們通過添加一個class名為“show”的樣式來將其顯示出來。然后，我們使用@keyframes來定義fadeout的動畫，從初始狀態（opacity: 1）逐漸減小透明度，在動畫結束時將其隱藏（display: none）。

通過以上的CSS樣式設置，我們就可以輕松地實現一個點擊后消失的提示框了。在HTML中，我們只需要在需要顯示提示框的地方添加一個onclick事件，來觸發提示框的顯示即可。