信息中心

提供网站前端、SEO、APP和公众号小程序开发技术信息

首页 >  网站前端

制作安装网页打开前的加载动画(含代码)

文章分类: 网站前端 浏览量:139 发布时间:2020-04-21 20:33:17

如何制作安装网页打开前的加载动画:

加载动画


以下是原HTML附带css、JS代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页加载动画</title>
<style type="text/css">
.home{width: 100%;height: 1000px;background: url(https://www.zhuseo.com/templets/default/img/bg_news.png);}
.loading {
display: none;
background-color: #161B29;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-indx: 1;
justify-content: center;
align-items: center;
}
.loading.active {
display: flex;
}
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.Rotation{
-webkit-transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}
.bar {
  width: 24vw;
  height: .25vw;
  position: absolute;
  left: 0;
  right: 0;
  top: 20vw;
  bottom: 0;
  margin: auto;
  overflow: hidden;
  background: #E645D0;
}
 
.progress {
  width: 24vw;
  height: .5vw;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  overflow: hidden;
  background: #17E1E6;
}
 
.progress {
  animation: progress 2s ease;
  -moz-animation: progress 2s ease;
  /* Firefox */
  -webkit-animation: progress 2s ease;
  /* Safari and Chrome */
  -o-animation: progress 2s ease;
  /* Opera */
}
 
@keyframes progress {
  0% {
    left: -48vw;
  }
  10% {
    left: -40vw;
  }
  30% {
    left: -32vw;
  }
  50% {
    left: -24vw;
  }
  65% {
    left: -20vw;
  }
  80% {
    left: -8vw;
  }
  100% {
    left: 0;
  }
}
</style>
 
<script type="text/javascript">
setTimeout(function(){
siteLoading.classList.remove('active')
},200000)
</script>
</head>
<body>
<div id="siteLoading" class="loading active ">
<div class="loading-animation Rotation">
<img src="https://www.zhuseo.com/templets/default/img/jz.jpg" >
</div>
 
<div class="bar">
    <div class="progress"></div>
</div>
 
</div>
<div class="home">
主页内容
</div>
</body>
</html>
安装的时候,把css放进你的样式表或者你的首页的head里面,JS一样,直接放head里面。
然后HTML代码部分,必须放在你的body里面的最开始的部分,同时,一定要设置这个div(代码里面加粗的部分)的z-index是最大值999.
 

7*24服务电话(以解决问题为最终目标)

173-0756-4526

直接负责:MR.潘:17307564526

技术负责:MR.王:18186226660

邮箱:694394062#qq.com
地址:珠海香洲区紫荆路振国巷9号科汇大厦

COPYRIGHT © 2010-2020 蓝黛科技珠海网站建设 珠海SEO www.zhuseo.com ALL RIGHTS RESERVER 版权所有 粤ICP备17099728号-1