css实现左右水草左右摇晃

今天我们来谈谈如何使用CSS实现左右水草左右摇晃的效果。首先我们需要一个基础的HTML结构：

<div class="grass-container">
  <div class="grass"></div>
  <div class="water"></div>
</div>

上面的代码中，我们使用了一个div作为容器，里面包含了水和草两个元素。我们可以给它们加上一些样式：

.grass-container {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.grass {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: url('grass.png') repeat-x;
  animation: sway 6s ease-in-out infinite;
}

.water {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 140px;
  background: url('water.png') repeat-x;
}

@keyframes sway {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(0);
  }
}

通过上面的代码，我们实现了如下效果：

我们分别为草和水添加了对应的样式。草使用了repeat-x让它能够水平重复图片，并使用了animation制作了左右摇晃的动画效果。水则只是简单使用了repeat-x进行水平平铺，并且没有添加任何动画效果。

总体来说，使用CSS实现左右水草左右摇晃的效果并不难，只需要巧妙地使用一些属性和动画即可。希望本文能够帮助大家更好地掌握CSS的技巧。