CSS 实现正面吹来的风。分为三层

要实现正面吹来的风的效果，可以使用CSS的animation和transform属性。可以将整个效果分为三层，分别用不同的速度和方向进行动画。

以下是一个实现正面吹来的风分为三层的CSS代码：

.wind-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.wind-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.wind-layer-1 {
  animation: wind-layer-1 2s linear infinite;
}

.wind-layer-2 {
  animation: wind-layer-2 3s linear infinite;
}

.wind-layer-3 {
  animation: wind-layer-3 4s linear infinite;
}

@keyframes wind-layer-1 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes wind-layer-2 {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes wind-layer-3 {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(50%);
  }
}

在上面的代码中，.wind-container是整个效果的容器，包含了三个.wind-layer层，每个层使用不同的animation动画实现不同的速度和方向。可以根据需求自行调整动画的速度和方向。

在HTML中，可以这样使用：

<div class="wind-container">
  <div class="wind-layer wind-layer-1"></div>
  <div class="wind-layer wind-layer-2"></div>
  <div class="wind-layer wind-layer-3"></div>
</div>

在上面的HTML中，.wind-layer-1、.wind-layer-2和.wind-layer-3是三个.wind-layer层的类名，通过添加不同的类名来实现不同的动画效果。