背景: bootstrap4 + jquery3.6
这里借助jquery执行的dom操作,非必须。虚心重新学习了CSS的动画animation。
语法:
animation: name duration timing-function delay iteration-count direction;
animation-name: 规定需要绑定到选择器的 keyframe 名称。。
animation-duration: 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function: 规定动画的速度曲线。
animation-delay: 规定在动画开始之前的延迟。
animation-iteration-count: 规定动画应该播放的次数。
animation-direction: 规定是否应该轮流反向播放动画。
html部分
<div id="loading">
<div id="loading-center">
<div id="loading-center-absolute">
<div class="loading_object" id="loading_object_one"></div>
<div class="loading_object" id="loading_object_two"></div>
<div class="loading_object" id="loading_object_three"></div>
<div class="loading_object" id="loading_object_four"></div>
<div class="loading_object" id="loading_object_five"></div>
<div class="loading_object" id="loading_object_six"></div>
<div class="loading_object" id="loading_object_seven"></div>
<div class="loading_object" id="loading_object_eight"></div>
</div>
</div>
</div>
CSS部分
#loading{
background-color: #fff;
height: 100%;
width: 100%;
position: fixed;
z-index: 999999999;
margin-top: 0px;
top: 0px;
}
#loading-center{
width: 100%;
height: 100%;
position: relative;
}
#loading-center-absolute {
position: absolute;
left: 50%;
top: 50%;
height: 150px;
width: 150px;
margin-top: -75px;
margin-left: -75px;
-moz-border-radius: 50% 50% 50% 50%;
-webkit-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
}
.loading_object{
width: 20px;
height: 20px;
background-color: #e96443;
position: absolute;
-moz-border-radius: 50% 50% 50% 50%;
-webkit-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
-webkit-animation: animate 0.8s infinite;
animation: animate 0.8s infinite;
}
#loading_object_one {
top: 19px;
left: 19px;
}
#loading_object_two {
top: 0px;
left: 65px;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
#loading_object_three {
top: 19px;
left: 111px;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#loading_object_four {
top: 65px;
left: 130px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
#loading_object_five {
top: 111px;
left: 111px;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#loading_object_six {
top: 130px;
left: 65px;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#loading_object_seven {
top: 111px;
left: 19px;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#loading_object_eight {
top: 65px;
left: 0px;
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
@-webkit-keyframes animate {
25% {
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
75% {
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
}
}
@keyframes animate {
50% {
-ms-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
transform: scale(1.5,1.5);
}
100% {
-ms-transform: scale(1,1);
-webkit-transform: scale(1,1);
transform: scale(1,1);
}
}
js部分
<!-- 这里借助了jquery来执行dom操作,直接上js也是可以的 -->
<script src="../jquery-3.6.0.js"></script>
<script>
$(window).on('load',function() {
$("#loading").fadeOut(500000);
});
</script>