css实现div上下浮动的效果

要实现div上下浮动的效果，可以使用CSS3动画和关键帧来实现。具体步骤如下：

1. 首先，需要定义一个包含需要浮动的div的容器，比如：

<div class="container">
  <div class="float-div"></div>
</div>

2. 然后，在CSS中定义浮动的div的样式，包括宽高、背景颜色等基本属性，以及定位和动画属性，如下：

.container {
  position: relative;
  height: 400px;
  background-color: #eee;
}

.float-div {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #f00;
  animation: float 2s ease-in-out infinite;
}

@keyframes float {
  0% {
    bottom: 0;
  }
  50% {
    bottom: 50px;
  }
  100% {
    bottom: 0;
  }
}

3. 在上面的样式中，通过设置`.float-div`的`position`为`absolute`，并且定义了动画`animation: float 2s ease-in-out infinite;`，其中`float`是定义的动画名称，`2s`是动画持续时间，`ease-in-out`是动画速度缓动函数，`infinite`表示无限循环播放。

4. 最后，在关键帧中定义浮动的效果，通过设置`bottom`属性的值，让元素在垂直方向上上下浮动。

通过上述步骤，就可以实现div上下浮动的效果了。