css上下左右循环飘动

CSS可以设置元素的位置和动画效果。其中，循环飘动是一种常见的效果。下面我们来看一下如何使用CSS实现上下左右循环飘动效果。

代码如下：
.flower {
  position: relative;
  animation: move 2s ease-in-out infinite;
}

@keyframes move {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    left: 100%;
    top: 100%;
  }
  100% {
    left: 0;
    top: 0;
  }
}

以上代码中，.flower是一个被设置为position: relative的元素。animation属性指定了元素要执行的动画，包括动画的名称（move）、持续时间（2s）、缓动函数（ease-in-out）和循环次数（infinite）。

接下来是关键的部分：定义move动画的关键帧（keyframes）。move动画共包括三个关键帧，分别对应动画的起始、中间和结束状态。在这里，我们使用left和top属性来控制元素的位置。而0%、50%和100%分别表示动画的三个关键帧对应的时间点。

在动画的起始状态（0%）时，元素的left和top的值都为0，即初始位置。中间状态（50%）时，元素的left和top的值分别为100%和100%，即元素向右下角移动。在结束状态（100%）时，元素返回到初始位置。

最后，通过在HTML中应用.flower样式，即可让元素实现上下左右循环飘动效果。