代码运行效果：

因上传图片大小受限，GIF动画经过加速处理
核心代码：

<div id="content">
  <ul class="content-wrap">
    <!-- 第一副画面 -->
    <li>
      <!-- 背景图 -->
      <div class="a_background">
        <div class="a_background_top"></div>
        <div class="a_background_middle"></div>
        <div class="a_background_botton"></div>
      </div>
      <!-- 云 -->
      <div class="cloudArea">
        <div class="cloud cloud1"></div>
        <div class="cloud cloud2"></div>
      </div>
      <!-- 太阳 -->
      <div id="sun"></div>
    </li>
    <!-- 第二副画面 -->
    <li>
      <!-- 背景图 -->
      <div class="b_background"></div>
      <div class="b_background_preload"></div>
      <!-- 商店 -->
      <div class="shop">
        <div class="door">
          <div class="door-left"></div>
          <div class="door-right"></div>
        </div>
        <!-- 灯 -->
        <div class="lamp"></div>
      </div>
      <!-- 鸟 -->
      <div class="bird"></div>
    </li>
    <!-- 第三副画面 -->
    <li>
      <!-- 背景图 -->

      <div id="bg3" class="c_background">

        <div class="c_background_top"></div>

        <div class="c_background_middle"></div>

        <div class="c_background_botton"></div>

      </div>
      <canvas id="canvas"></canvas>
      <!-- 小女孩 -->
      <div class="girl"></div>
      <div class="bridge-bottom">

      </div>
      <!-- 星星 -->
      <ul class="stars">
        <li class="stars1"></li>
        <li class="stars2"></li>
        <li class="stars3"></li>
        <li class="stars4"></li>
        <li class="stars5"></li>
        <li class="stars6"></li>
      </ul>

      <div class="logo"></div>
    </li>
  </ul>
  <!-- 雪花 -->
  <div id="snowflake"></div>
  <!-- 小男孩 -->
  <div id="boy" class="charector"></div>
</div>

完整代码下载地址：HTML5情人节送花烟花动画表白代码