CSS 是網頁開發中不可或缺的重要組成部分，可以實現豐富的交互效果。其中幽靈浮動效果，是一種非常炫酷的交互效果，是目前網頁設計領域中非常流行的效果之一。幽靈浮動效果可以讓圖片、文字等元素在浮動的過程中產生幽靈的效果，實現視覺上的驚艷效果。

.ghost-effect {
position: relative;
background-color: #000;
color: #fff;
font-size: 30px;
padding: 20px;
float: left;
animation: ghost-floating 1.5s ease-out infinite;
}
@keyframes ghost-floating {
0% {
transform: translate(0, 0);
opacity: 1;
}
50% {
transform: translate(-10px, -10px);
opacity: 0.6;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}

代碼中，我們首先定義了一個幽靈效果的類 ghost-effect，其中設置了背景顏色、字體大小等基本樣式，然后使用浮動效果 float：left，讓元素自左向右浮動。

接著，我們使用了 CSS3 動畫技術，創建了一個名為 ghost-floating 的動畫效果，包括 0%、50% 和 100% 三個關鍵幀。在 0% 的關鍵幀中，設置了其初始位置和不透明度為 1，即元素正常顯示；在 50% 的關鍵幀中，設置了其位置和不透明度的變化，產生幽靈效果；最后，在 100% 的關鍵幀中恢復了其初始位置和不透明度，使其循環播放。

以上就是使用 CSS 實現幽靈浮動效果的詳細步驟，相信有了這篇文章的幫助，更多人都能夠掌握這種流行的感覺良好的效果，并應用到網頁的設計中，為用戶帶去更好的體驗。