css3代码实现div自动向上飘

CSS3提供了丰富的动画效果，今天我们来学习如何使用CSS3实现一个div自动向上飘的效果。

/*设置div的样式*/

.div {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 100px;
  border-radius: 10px;
  background-color: #f00;
  animation: up 5s ease-in-out infinite;
}

/*设置动画*/

@keyframes up {
  0% {
    bottom: 0;
    opacity: 1;
  }
  50% {
    bottom: 50%;
    opacity: 0.5;
  }
  100% {
    bottom: 100%;
    opacity: 0;
  }
}

首先，我们需要为div设置样式，包括位置、大小、形状、背景颜色等。在这里，我们把div设置在浏览器底部，并且使用动画将其向上移动。我们使用了一个名为up的动画，设置了动画持续时间为5秒，动画函数为ease-in-out，并且将动画设置为无限循环。

接下来，我们定义了动画的关键帧。0%代表动画的起始状态，我们将div的底部设置为浏览器底部，透明度为1。50%代表动画的中间状态，我们将div的底部设置为浏览器底部的一半，透明度为0.5。最后的100%代表动画的结束状态，我们将div的底部设置为浏览器顶部，透明度为0。

经过以上设置，我们就成功实现了一个div自动向上飘的效果。