前端页面首次进入出现白屏

最新推荐文章于 2023-05-05 17:51:35 发布

我叫小魏子。

最新推荐文章于 2023-05-05 17:51:35 发布

阅读量900

点赞数

分类专栏： h5 文章标签：前端 css css3 html

本文链接：https://blog.csdn.net/weixin_41618917/article/details/122069768

版权

h5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

页面首次进入时，有个缓冲加载资源的数据，如果此时当前的网速过慢时，页面就会出现一个卡顿白屏状态，很难看，那我们一起加个好看的加载动图吧┗( ▔, ▔ )┛

先放效果图：

在这里插入图片描述
在html文件夹中直接写


<body>
	<div id="app">
		<div class="first-loading-wrp">
			<div class="loading-wrp">
			  <span class="dot dot-spin">
				<i></i>
				<i></i>
				<i></i>
				<i></i>
			  </span>
			</div>
			<h1>页面加载中</h1>
		  </div>
	</div>
</body>


<head>
	<style>
		/* 首页白屏加载loading */
		.first-loading-wrp {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		  height: 90vh;
		  min-height: 90vh;
		}
		
		.first-loading-wrp > h1 {
		  font-size: 24px;
		  font-weight: bolder;
		}
		
		.first-loading-wrp .loading-wrp {
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  padding: 40px;
		}
		
		.dot {
		  position: relative;
		  box-sizing: border-box;
		  display: inline-block;
		  width: 54px;
		  height: 54px;
		  font-size: 54px;
		  transform: rotate(45deg);
		  animation: antRotate 1.2s infinite linear;
		}
		
		.dot i {
		  position: absolute;
		  display: block;
		  width: 28px;
		  height: 28px;
		  background-color: #1890ff;
		  border-radius: 100%;
		  opacity: 0.3;
		  transform: scale(0.75);
		  transform-origin: 50% 50%;
		  animation: antSpinMove 1s infinite linear alternate;
		}
		
		.dot i:nth-child(1) {
		  top: 0;
		  left: 0;
		}
		
		.dot i:nth-child(2) {
		  top: 0;
		  right: 0;
		  -webkit-animation-delay: 0.4s;
		  animation-delay: 0.4s;
		}
		
		.dot i:nth-child(3) {
		  right: 0;
		  bottom: 0;
		  -webkit-animation-delay: 0.8s;
		  animation-delay: 0.8s;
		}
		
		.dot i:nth-child(4) {
		  bottom: 0;
		  left: 0;
		  -webkit-animation-delay: 1.2s;
		  animation-delay: 1.2s;
		}
		
		@keyframes antRotate {
		  to {
		    -webkit-transform: rotate(405deg);
		    transform: rotate(405deg);
		  }
		}
		
		@-webkit-keyframes antRotate {
		  to {
		    -webkit-transform: rotate(405deg);
		    transform: rotate(405deg);
		  }
		}
		
		@keyframes antSpinMove {
		  to {
		    opacity: 1;
		  }
		}
		@-webkit-keyframes antSpinMove {
		  to {
		    opacity: 1;
		  }
		}
	</style>
</head>

我叫小魏子。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端页面首次进入出现白屏

页面首次进入时，有个缓冲加载资源的数据，如果此时当前的网速过慢时，页面就会出现一个卡顿白屏状态，很难看，那我们一起加个好看的加载动图吧┗( ▔, ▔ )┛先放效果图：在html文件夹中直接写<body> <div id="app"> <div class="first-loading-wrp"> <div class="loading-wrp"> <span class="dot dot-spin"> &lt
复制链接

扫一扫