CSS圖片漂浮效果是一種讓圖片浮動(dòng)在頁(yè)面上的特殊效果。通過(guò)使用CSS屬性，可以輕松地實(shí)現(xiàn)漂浮效果。下面我們來(lái)學(xué)習(xí)一下如何制作CSS圖片漂浮效果。

.img {
position: fixed;
bottom: 0;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-20px);
}
100% {
transform: translatey(0px);
}
}

首先，我們需要將圖片的定位屬性設(shè)置為fixed，這將使圖片在頁(yè)面上始終保持固定位置，不隨頁(yè)面滾動(dòng)而移動(dòng)。接著，我們使用animation屬性來(lái)創(chuàng)建漂浮效果。在此示例中，我們使用了float函數(shù)，它定義了每個(gè)關(guān)鍵幀之間的變化。在這個(gè)例子中，圖片將在3秒內(nèi)以平滑的速度左右移動(dòng)，并且無(wú)限循環(huán)播放。

最后，我們使用@keyframes屬性指定transition函數(shù)中使用的關(guān)鍵幀。在此示例中，float函數(shù)定義了三個(gè)關(guān)鍵幀：0%、50%和100%。0%表示動(dòng)畫(huà)的開(kāi)始狀態(tài)，50%是動(dòng)畫(huà)的中間狀態(tài)，100%是動(dòng)畫(huà)的結(jié)束狀態(tài)。在每個(gè)關(guān)鍵幀中，我們使用transform屬性來(lái)控制圖片的位置。translatey()函數(shù)用于在縱軸上進(jìn)行平移，使圖片上下浮動(dòng)。

通過(guò)這種方式，我們可以輕松地制作出漂浮的圖片效果。這種效果可以在產(chǎn)品展示頁(yè)面、個(gè)人博客等場(chǎng)合中使用，為頁(yè)面增添一些活力。