网页Loading动画添加教程
第一步:创建CSS样式文件
新建一个名为loading.css的样式文件,将以下CSS代码放入其中,然后在页面中引用这个文件:
#Loadanimation {
background-color: #fff;
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
margin-top: 0px;
top: 0px;
}
#Loadanimation-center {
width: 100%;
height: 100%;
position: relative;
}
#Loadanimation-center-absolute {
position: absolute;
left: 50%;
top: 50%;
height: 200px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
}
.ymwu_object {
-moz-border-radius: 50% 50% 50% 50%;
-webkit-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
position: absolute;
border-left: 5px solid #87CEFA;
border-right: 5px solid #FFC0CB;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
-webkit-animation: animate 2.5s infinite;
animation: animate 2.5s infinite;
}
#ymwu_one {
left: 75px;
top: 75px;
width: 50px;
height: 50px;
}
#ymwu_two {
left: 65px;
top: 65px;
width: 70px;
height: 70px;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
#ymwu_three {
left: 55px;
top: 55px;
width: 90px;
height: 90px;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#ymwu_four {
left: 45px;
top: 45px;
width: 110px;
height: 110px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
@-webkit-keyframes animate {
50% {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes animate {
50% {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
第二步:添加HTML结构
将以下代码添加到网站的头部文件(通常是header.php)中:
<div id="Loadanimation" style="z-index:999999;">
<div id="Loadanimation-center">
<div id="Loadanimation-center-absolute">
<div class="ymwu_object" id="ymwu_four"></div>
<div class="ymwu_object" id="ymwu_three"></div>
<div class="ymwu_object" id="ymwu_two"></div>
<div class="ymwu_object" id="ymwu_one"></div>
</div>
</div>
</div>
<script>
$(function(){
$("#Loadanimation").fadeOut(3000);
});
</script>
效果展示

自定义说明
本Loading动画支持自定义样式,您可以根据需要修改CSS部分。网上还有很多其他CSS Loading动画效果,只需替换第二步中的HTML结构代码即可(注意保留JavaScript部分不变)。
这个动画特点:
- 渐变色旋转圆环效果
- 多层叠加产生立体感
- 3秒后自动淡出
- 全屏覆盖,确保加载期间用户无法操作















这一切,似未曾拥有