CSS圖片漂浮效果是一種讓圖片浮動在頁面上的特殊效果。通過使用CSS屬性，可以輕松地實現漂浮效果。下面我們來學習一下如何制作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);
}
}

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

最后，我們使用@keyframes屬性指定transition函數中使用的關鍵幀。在此示例中，float函數定義了三個關鍵幀：0%、50%和100%。0%表示動畫的開始狀態，50%是動畫的中間狀態，100%是動畫的結束狀態。在每個關鍵幀中，我們使用transform屬性來控制圖片的位置。translatey()函數用于在縱軸上進行平移，使圖片上下浮動。

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