效果：

Paste_Image.png

Paste_Image.png

html部分：

<!--廣告-->
<div class="homeTopAd01" style="position: absolute; left: 50%; margin: 0 0 0 -600px;">
  <div style="margin: 0 auto; width: 1200px;">
      <img src="1.jpg">
  </div>
  <div style="position: absolute; z-index: 1; top: 5px; right:5px">
    <img src="2.png" class="adv-close">
  </div>
</div><!--adv01-->
<div id="homeTopAd02" style="height: 100px;"></div>
<script type="text/javascript">
  $(".adv-close").click(function(){
    $(".homeTopAd01").css("display", "none");
    $("#homeTopAd02").css("display", "none");
  });
</script>
<!--廣告end-->

CSS部分：

/*廣告*/
.homeTopAd01{
  animation-name: bounceOutDown;
  animation-duration: 1s;
}
@keyframes bounceOutDown{
      0%{
        -webkit-transform:translate3d(0,-999px,0);
            transform:translate3d(0,-999px,0)
      }
      100%{
        -webkit-transform:translate3d(0,0,0);
            transform:translate3d(0,0,0)
        }
      }
/*廣告end*/

重點：
1.外層一個div-homeTopAd01用于給廣告圖片定位
2.div-homeTopAd02用于撐開位置給廣告
3.display: none;不為被隱藏的對象保留其物理空間，即該對象在頁面上徹底消失，通俗來說就是看不見也摸不到。
注：visible:hidden--- 使對象在網(wǎng)頁上不可見，但該對象在網(wǎng)頁上所占的空間沒有改變，通俗來說就是看不見但摸得到。