首页 > 微信营销 > 微信开发 > HTML5页面加载的过渡动画特效

HTML5页面加载的过渡动画特效

2018-07-17 12:05:17 200万次浏览

1.首先需要做一张GIF的加载动画,一般网上都可以找到一些loading的gif,不过如果你想做的更个性一点的话,就自己用flash做一个动画,导出成gif格式就可以了,具体可以参考。

2.在BODY后面写加载动画的DIV容器,参考如下:

<body>
<divclass=”page_spinner“></div>

3.加载动画的CSS设置,主要要设置动画加载层的z-index大一些,盖住其他元素。如下:

.page_spinner {	position:fixed;	background: url(../images/main_spinnerr.gif) 50% 50% no-repeat #fff;	z-index:9999;	width:100%;	height:100%;	top:0;	left:0}4.在页面的最后位置,加载事件中写入执行语句。(主要是将加载动画慢慢隐藏掉,然后设置body的overflow为默认值)

<script>
$(window).load(function(){$(‘.page_spinner’).fadeOut(1000);$(‘body’).css({overflow:’visible’})})
</script>