jquery 加载动画效果怎么做

 我来答

2个回答

#热议# 在购买新能源车时，要注意哪些？

YQ努力吧
2017-03-20 · 超过119用户采纳过TA的回答

知道答主

回答量：460

采纳率：0%

帮助的人：92.6万

我也去答题访问个人页

关注

展开全部

有个很简单的方法
首先载入jquery

<script src="

之后把body加上style

<body style="display: none;">

然后添加script事件

<script>
$(document).ready(function(){
    $('body').show(10000); // 1000等于1秒
});
</script>

本回答由提问者推荐

已赞过 已踩过<

评论收起

遥遥无期Li
2017-03-20 · TA获得超过497个赞

知道小有建树答主

回答量：544

采纳率：56%

帮助的人：241万

我也去答题访问个人页

关注

展开全部

css3来实现动画效果更高，配上js控制显示隐藏，就模拟出了一个，给你一个示例，js就没有了啊

html：

<div class="loader">
	<div class="myloading"></div>
</div>

css：

.loader{width: 100%;height: 100%;position: fixed;z-index: 100;
 		animation: bgc 4s 1s infinite;-webkit-animation: bgc 4s 1s infinite;-moz-animation: bgc 4s 1s infinite;-o-animation: bgc 4s 1s infinite;-ms-animation: bgc 4s 1s infinite;
 		animation-fill-mode: both;}
@keyframes bgc{
 	0%{ background-color: blueviolet; }
 	25%{ background-color: #B1A25E;}
 	50%{background-color: #25AEF5;}
 	75%{background-color: mediumvioletred;}
 	100%{ background-color: blueviolet; }
}
 @-webkit-keyframes bgc{
 	0%{ background-color: blueviolet; }
 	25%{ background-color: #B1A25E;}
 	50%{background-color: #25AEF5;}
 	75%{background-color: mediumvioletred;}
 	100%{ background-color: blueviolet; }
 }
 @-moz-keyframes bgc{
 	0%{ background-color: blueviolet; }
 	25%{ background-color: #B1A25E;}
 	50%{background-color: #25AEF5;}
 	75%{background-color: mediumvioletred;}
 	100%{ background-color: blueviolet; }
 }
 @-ms-keyframes bgc{
 	0%{ background-color: blueviolet; }
 	25%{ background-color: #B1A25E;}
 	50%{background-color: #25AEF5;}
 	75%{background-color: mediumvioletred;}
 	100%{ background-color: blueviolet; }
 }
 @-o-keyframes bgc{
 	0%{ background-color: blueviolet; }
 	25%{ background-color: #B1A25E;}
 	50%{background-color: #25AEF5;}
 	75%{background-color: mediumvioletred;}
 	100%{ background-color: blueviolet; }
 }
.myloading{ width: 50px;height: 50px;background-color: #FFF;margin: auto;position: absolute;left: 0;top: 0;right: 0;bottom: 0;
			animation: load 2s infinite;-webkit-animation: load 2s infinite;-moz-animation: load 2s infinite;-o-animation: load 2s infinite;-ms-animation: load 2s infinite;
			animation-fill-mode: both;}
@keyframes load{
	0%{transform: perspective(100px) rotateX(0deg) rotateY(0);}
	25%{transform: perspective(100px) rotateX(180deg) rotateY(0);}
	50%{transform: perspective(100px) rotateX(180deg) rotateY(180deg);}
	75%{transform: perspective(100px) rotateX(0) rotateY(180deg);}
	100%{transform: perspective(100px) rotateX(0) rotateY(0); }
}
@-webkit-keyframes load{
	0%{transform: perspective(100px) rotateX(0deg) rotateY(0);}
	25%{transform: perspective(100px) rotateX(180deg) rotateY(0);}
	50%{transform: perspective(100px) rotateX(180deg) rotateY(180deg);}
	75%{transform: perspective(100px) rotateX(0) rotateY(180deg);}
	100%{transform: perspective(100px) rotateX(0) rotateY(0); }
}
@-moz-keyframes load{
	0%{transform: perspective(100px) rotateX(0deg) rotateY(0);}
	25%{transform: perspective(100px) rotateX(180deg) rotateY(0);}
	50%{transform: perspective(100px) rotateX(180deg) rotateY(180deg);}
	75%{transform: perspective(100px) rotateX(0) rotateY(180deg);}
	100%{transform: perspective(100px) rotateX(0) rotateY(0); }
}
@-o-keyframes load{
	0%{transform: perspective(100px) rotateX(0deg) rotateY(0);}
	25%{transform: perspective(100px) rotateX(180deg) rotateY(0);}
	50%{transform: perspective(100px) rotateX(180deg) rotateY(180deg);}
	75%{transform: perspective(100px) rotateX(0) rotateY(180deg);}
	100%{transform: perspective(100px) rotateX(0) rotateY(0); }
}
@-ms-keyframes load{
	0%{transform: perspective(100px) rotateX(0deg) rotateY(0);}
	25%{transform: perspective(100px) rotateX(180deg) rotateY(0);}
	50%{transform: perspective(100px) rotateX(180deg) rotateY(180deg);}
	75%{transform: perspective(100px) rotateX(0) rotateY(180deg);}
	100%{transform: perspective(100px) rotateX(0) rotateY(0); }
}

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

jquery 加载动画效果怎么做

其他类似问题

为你推荐：