记录自己做过的一些简单常用效果
解决方案:
1 . 自己先写一个加载动画
元素如下
<div class="loading">
<div class="load_img">
<img class="img1" src="./images/img1.png">
<img class="img2" src="./images/img2.png">
</div>
</div>
样式如下
.loading {
position: fixed;
width: 100vw;
height: 100vh;
background-color: black;
}
.loading img{
position:fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 99999999999;
width: 20wv;
height: 20vh;
}
.load_img .img1{animation:img1 8s infinite linear;}
@keyframes img1 {
from {
transform:rotate(0deg);
}
50% {
transform:rotate(180deg);
}
to{
transform:rotate(360deg);
}
}
.load_img .img2{animation:img2 7s infinite linear;}
@keyframes img2 {
from {
transform:rotate(0deg);
}
50% {
transform:rotate(-180deg);
}
to{
transform:rotate(-360deg);
}
}
这样一来无论你的屏幕多大多高,这个加载都会全屏占据你的屏幕。
最后最简单得方法(必须先src jQuery.js)
页面一打开就执行:
$(document).ready(function(){
$(".loading").show()
})
页面所有资源加载完毕后执行
$(window).load(function(){
$(".loading").toggle()
});
效果如下图。 中间那个蓝色图片会转圈圈,具体图片可以自行调整。等页面内容加载完毕即可。