通用博客网站添加loading加载中动画代码

全屏阅读
  • 基本信息
  • 作者:
  • 作者已发布:917篇文章
  • 发布时间:2023年05月21日 21:01:46
  • 所属分类:CSS, CSS3, html, WEB前端
  • 阅读次数:183次阅读
  • 标签:

添加几行代码loading加载,动画代码就可以加强浏览者的体验,不在等待页面加载时感到枯燥,从而关闭网页,很多网站都会制作一个“网页正在加载中”的提示效果或显示加载进程,加载完成后提示消失,大部分都应用在网站的首页,今天就拿Emlog主题举例说明。

image.png

添加教程

1.把html代码添加到主题头部以内,把css远程链接改成自己的,css文件在附件。

<link rel="stylesheet" href="自己的域名/loading.css" />
<div id="Loadanimation" style="z-index:999999;">
<div id="Loadanimation-center">
<div id="Loadanimation-center-absolute">
<div class="cnm_object" id="cnm_four"></div>
<div class="cnm_object" id="cnm_three"></div>
<div class="cnm_object" id="cnm_two"></div>
<div class="cnm_object" id="cnm_one"></div>
</div>
</div>
</div>

2.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;
}
.cnm_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;
}
#cnm_one {
	left:75px;
	top:75px;
	width:50px;
	height:50px;
}
#cnm_two {
	left:65px;
	top:65px;
	width:70px;
	height:70px;
	-webkit-animation-delay:0.1s;
	animation-delay:0.1s;
}
#cnm_three {
	left:55px;
	top:55px;
	width:90px;
	height:90px;
	-webkit-animation-delay:0.2s;
	animation-delay:0.2s;
}
#cnm_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);
}
;}

3.把下面javascript代码添加到主题头部以内访问网站刷新缓存就可以看到loading加载动画了。

<script>
$(function(){ 
    $("#Loadanimation").fadeOut(540); 
});
</script>

顶一下
(0)
100%
订阅 回复
踩一下
(0)
100%
» 郑重声明:本文由mpxq168发布,所有内容仅代表个人观点。版权归恒富网mpxq168共有,欢迎转载, 但未经作者同意必须保留此段声明,并给出文章连接,否则保留追究法律责任的权利! 如果本文侵犯了您的权益,请留言。

目前有 0 条留言 其中:访客:0 条, 博主:0 条

给我留言

您必须 [ 登录 ] 才能发表留言!