今天自己实现了这个功能,记录一下
效果:
进入网页时先出现加载动画,加载完毕后显示网页
实现原理:
在html上方放一个div,用来显示加载动画,js判断加载完毕事件,将div隐藏即可。
知识点整理:
伪元素实现垂直居中、awesome字体动画、js判断HTML加载是否完成
代码:
css:
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.loading-div {
width: 1800px;
height: 720px;
background-color: #fff;
display: table-cell