在网页设计中，经常会用到图片，如何让图片有趣呢？可以通过CSS实现图片上下飘动的效果。

.img {
position: relative;
animation: float 5s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}

首先需要设置img元素的position属性为relative，这样才能相对于img元素的初始位置移动。接着使用CSS动画来实现飘动的效果。在@keyframes中定义transform属性的变化，通过translateY()函数来控制元素的上下移动。

以上代码中，动画名称为float，持续时间为5秒，运动时的速度为ease-in-out，无限循环。在transform属性中，通过设置translateY()函数的值来让元素上下移动。一开始的位置是0px，到50%的时候上移10px，再到100%的时候回到原来的位置。

对于多个图片，只需要将CSS选择器改为对应的class或id即可。

通过CSS实现图片上下飘动的效果，可以让网页更生动有趣，增加用户的体验感。