CSS成功效果氣泡是一種常見的網頁設計元素，可以在網頁中為用戶提供反饋和提示。下面我們介紹一些創建此類氣泡的CSS代碼。

/* 氣泡框 */
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/* 帶箭頭的氣泡框 */
.tooltip-arrow {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip-arrow .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip-arrow .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent; 
}
.tooltip-arrow:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

以上代碼中，我們分別定義了普通和帶箭頭的氣泡框。通過設置.position、.tooltiptext、.tooltiptext::after的樣式，我們可以定義氣泡框的位置、大小、背景顏色等基本屬性。通過.hover偽類可以實現鼠標懸停的效果。

使用這些簡單的CSS代碼，我們可以輕松地為頁面添加漂亮的提示框，提高用戶體驗。