在网页设计中，图片漂浮效果是常用的一种效果。通过CSS控制图片的漂浮效果可以使网页看起来更加生动，让用户感到更加亲切。下面我们来介绍一下如何通过CSS来控制图片漂浮。

img {
position: absolute;
animation: float 5s ease-in-out infinite;
}
@keyframes float {
from {
transform: translate(0, 0);
}
65% {
transform: translate(0, -10px);
}
to {
transform: translate(0, 0);
}
}

上面的代码中，我们首先设置了图片的位置属性为“absolute”，即绝对定位。接着我们定义了一个名为“float”的动画，这个动画将使图片在Y轴方向上进行漂浮。我们使用了“transform”属性来改变图片的平移，这个属性是CSS3中很重要的属性之一。

在使用动画时，通常需要控制动画的“过程”和“结束”状态。由于“float”动画定义了三个关键帧点，分别对应动画的“开始”、“中间”、“结束”状态。在动画进行的过程中，图片会不断地从一个状态过渡到另一个状态，最终实现漂浮的效果。

通过上述代码，我们便可以实现图片漂浮的效果。在实际应用中，我们可以根据需要调整动画的时长以及关键帧的位置，实现不同的效果，从而让网页看起来更加生动。