css3海边夕阳一群大雁场景动画特效代码下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. HTML代码

<div class="world">
  <div class="sunset">
    <div class="sun"></div>
    <div class="bg">
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>
    </div>
    <div class="sea"></div>
    <div class="sky"></div>
    <div class="horizon"></div>
  </div>
  <div class="line -left"></div>
  <div class="line -right"></div>
  <div class="birdposition">
    <div class="bird">
      <div class="wing -left"></div>
      <div class="wing -right"></div>
    </div>
  </div>
  <div class="birdposition">
    <div class="bird">
      <div class="wing -left"></div>
      <div class="wing -right"></div>
    </div>
  </div>
  <div class="birdposition">
    <div class="bird">
      <div class="wing -left"></div>
      <div class="wing -right"></div>
    </div>
  </div>
  <div class="birdposition">
    <div class="bird">
      <div class="wing -left"></div>
      <div class="wing -right"></div>
    </div>
  </div>
  <div class="birdposition">
    <div class="bird">
      <div class="wing -left"></div>
      <div class="wing -right"></div>
    </div>
  </div>
  <div class="birdposition">
    <div class="bird">
      <div class="wing -left"></div>
      <div class="wing -right"></div>
    </div>
  </div>
  <div class="birdposition">
    <div class="bird">
      <div class="wing -left"></div>
      <div class="wing -right"></div>
    </div>
  </div>
  <div class="birdposition">
    <div class="bird">
      <div class="wing -left"></div>
      <div class="wing -right"></div>
    </div>
  </div>
  <div class="birdposition">
    <div class="bird">
      <div class="wing -left"></div>
      <div class="wing -right"></div>
    </div>
  </div>
  <div class="birdposition">
    <div class="bird">
      <div class="wing -left"></div>
      <div class="wing -right"></div>
    </div>
  </div>
  <div class="birdposition">
    <div class="bird">
      <div class="wing -left"></div>
      <div class="wing -right"></div>
    </div>
  </div>
  <div class="birdposition">
    <div class="bird">
      <div class="wing -left"></div>
      <div class="wing -right"></div>
    </div>
  </div>
  <div class="birdposition">
    <div class="bird">
      <div class="wing -left"></div>
      <div class="wing -right"></div>
    </div>
  </div>
  <div class="birdposition">
    <div class="bird">
      <div class="wing -left"></div>
      <div class="wing -right"></div>
    </div>
  </div>
  <div class="birdposition">
    <div class="bird">
      <div class="wing -left"></div>
      <div class="wing -right"></div>
    </div>
  </div>
  <div class="birdposition">
    <div class="bird">
      <div class="wing -left"></div>
      <div class="wing -right"></div>
    </div>
  </div>
  <div class="birdposition">
    <div class="bird">
      <div class="wing -left"></div>
      <div class="wing -right"></div>
    </div>
  </div>
  <div class="birdposition">
    <div class="bird">
      <div class="wing -left"></div>
      <div class="wing -right"></div>
    </div>
  </div>
  <div class="birdposition">
    <div class="bird">
      <div class="wing -left"></div>
      <div class="wing -right"></div>
    </div>
  </div>
  <div class="birdposition">
    <div class="bird">
      <div class="wing -left"></div>
      <div class="wing -right"></div>
    </div>
  </div>
</div>