CSS飄動是使用CSS動畫效果制作元素在頁面上飄動的特效。通過CSS的一些屬性，如transform、position和animation等，可以快速而簡單地實現元素的飄動效果。

/* 創建動畫 */
@keyframes float {
from {
transform: translateY(0);
}
to {
transform: translateY(-50px);
}
}
/* 應用動畫 */
.floating-element {
position: fixed;
animation: float 1s ease-in-out infinite alternate;
}

在上面的代碼中，我們創建了一個名為float的動畫，該動畫從元素的初始狀態到最終狀態分別移動了0到-50像素的距離。然后，我們將這個動畫應用于一個指定樣式的元素中，使得這個元素可以在頁面上飄動。

除了上述方法外，我們還可以使用CSS的其他一些屬性來改變元素的位置和外觀，如以下幾個屬性：

.floating-element {
position: absolute;
right: -50px;
top: 50%;
transform: translateY(-50%);
animation: float 2s ease-in-out infinite alternate;
}

通過設置position屬性為absolute，可以將元素的父容器設置為relative，然后使用top和right等位置屬性對元素進行定位；通過使用transform屬性的translateY函數，可以實現水平方向的平移并使元素保持垂直居中；最后使用animation屬性應用動畫效果，實現元素的飄動。

總之，CSS飄動是一種非常有趣的特效，在頁面中使用合適的方式能夠起到增強用戶體驗的作用。當然，我們在使用過程中需要注意控制元素的數量和動畫效率，避免對頁面性能造成過大的影響。