效果：
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--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
