html页面加载时出现动态效果

最新推荐文章于 2024-06-09 09:49:42 发布

狗庄欺人太甚

最新推荐文章于 2024-06-09 09:49:42 发布

阅读量717

点赞数 1

分类专栏： html 文章标签： html 前端 java

本文链接：https://blog.csdn.net/weixin_48262500/article/details/126679882

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在<head></head>里面引入以下代码

 <!-- 加载画面 -->
	<link rel="stylesheet" href="../static/css/loading.css">
    <script src="../static/js/loading.js"></script>

loading.css

.spinner {
    width: 60px;
    height: 60px;
    background-image: linear-gradient(0deg,#8a76f6,#70cafe);
   
    margin: 100px auto;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
    
  }
   
  @-webkit-keyframes rotateplane {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
  }
   
  @keyframes rotateplane {
    0% {
      transform: perspective(120px) rotateX(0deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    } 50% {
      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    } 100% {
      transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
  }

loading.js

//获取浏览器页面可见高度和宽度  
var _PageHeight = document.documentElement.clientHeight,  
_PageWidth = document.documentElement.clientWidth;  
//计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）  
var _LoadingTop = _PageHeight > 90 ? (_PageHeight - 90) / 2 : 0,  
_LoadingLeft = _PageWidth > 90 ? (_PageWidth - 90) / 2 : 0;  
//在页面未加载完毕之前显示的loading Html自定义内容  
var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#FFFFFF;opacity:1.0;filter:alpha(opacity=80);z-index:10000;"><div class="spinner" style="position: top: 60px; margin:' + _LoadingTop + 'px auto ;"></div></div>';  
//呈现loading效果  
document.write(_LoadingHtml);  

//监听加载状态改变  
document.onreadystatechange = completeLoading;  

//加载状态为complete时移除loading效果  
function completeLoading() {  
if (document.readyState == "complete") {  
$("#loadingDiv").fadeOut(1500);
}  
}

参考链接：

html页面Loading效果实现：加载新页面前的等待过渡画面 - 编程猎人