在網(wǎng)頁(yè)設(shè)計(jì)中，漂浮的圖片是一種非常流行的效果。HTML5提供了幾種方法來(lái)設(shè)置圖片漂浮，讓網(wǎng)頁(yè)更加生動(dòng)和有趣。

/* 設(shè)置圖片漂浮 */
img {
position: absolute;/*設(shè)置絕對(duì)定位*/
animation: float 3s ease-in-out infinite;/*設(shè)置動(dòng)畫(huà)效果*/
}
/* 定義動(dòng)畫(huà) */
@keyframes float {
0% {
transform: translateY(0);/*初始狀態(tài)，圖片不漂浮*/
}
50% {
transform: translateY(-20px);/*圖片向上漂浮*/
}
100% {
transform: translateY(0);/*圖片回到初始狀態(tài)*/
}
}

在上述代碼中，首先使用CSS的position屬性，將圖片設(shè)置為絕對(duì)定位，這樣可以實(shí)現(xiàn)浮動(dòng)效果。

接下來(lái)，使用animation屬性，在圖片上定義一個(gè)名為float的動(dòng)畫(huà)，這個(gè)動(dòng)畫(huà)會(huì)執(zhí)行3秒鐘，以漸入漸出的方式無(wú)限循環(huán)。

在@keyframes規(guī)則中，定義了動(dòng)畫(huà)的關(guān)鍵幀，即動(dòng)畫(huà)過(guò)程中的不同狀態(tài)。初始狀態(tài)為0%，即圖片不漂浮；中間狀態(tài)為50%，即圖片向上漂浮；最終狀態(tài)為100%，即圖片回到初始狀態(tài)。

當(dāng)這個(gè)CSS代碼被應(yīng)用到網(wǎng)頁(yè)上的圖片時(shí)，圖片將漂浮起來(lái)，不斷重復(fù)動(dòng)畫(huà)效果，為網(wǎng)頁(yè)增添一份生動(dòng)和有趣的氛圍。