CSS3是最新的CSS標準，其中包含了許多新的樣式和動畫效果，如上下飄動的效果就是其中之一。

.box{
position: relative;
}
.box:before{
content: "";
position: absolute;
top: -20px;
left: 0px;
width: 100%;
height: 20px;
background-color: #fff;
animation: up-down 2s ease-in-out infinite;
}
@keyframes up-down{
0%{
top: -20px;
}
50%{
top: 20px;
}
100%{
top: -20px;
}
}

以上代碼中，首先我們需要在整個容器上設置position: relative，然后使用:before偽類在容器的最頂部創建一個20px高的白色背景。接著，我們使用@keyframes關鍵字定義動畫效果，使其在0%、50%和100%的狀態下具有不同的top屬性值。最后，我們將定義好的動畫效果通過animation屬性適用到:before偽類上，并設置動畫的執行時間為2秒，運動軌跡為緩入緩出，由于我們需要讓這個動畫不斷重復執行，所以設置其為infinite。

經過以上步驟，我們就可以在界面上看到一個具有上下飄動效果的白色背景了。當然，我們還可以繼續優化這個效果，比如改變動畫的速度、顏色、透明度等等，讓整個效果更加生動有趣。