扫描二维码在手机上浏览

三步给你的网站添加全局loading动画 超简单实用教程

广告位,电脑和手机可分别设置,可放任何广告代码
对了,我应该放什么广告呢?

loading动画大家都知道,很多网站的页面加载都有这样的切换动画, 不仅炫酷好看,还可以让加载等待的时间更加有趣。很简单,一共三步,就能实现本站一样的全局加载loading动画

第一步

找到你网站的头部代码,在<head>标签内加入以下代码:

这段代码实际就是全局动画的css样式,有能力的可以自行修改。

<style type="text/css">.qjdh_no6 {
	transform: scale(1) translateY(-30px)
}

.qjdh_no6>div:nth-child(2) {
	-webkit-animation-delay: -.4s;
	animation-delay: -.4s
}

.qjdh_no6>div:nth-child(3) {
	-webkit-animation-delay: -.2s;
	animation-delay: -.2s
}

.qjdh_no6>div {
	position: absolute;
	top: 0;
	left: -30px;
	margin: 2px;
	margin: 0;
	width: 15px;
	width: 60px;
	height: 15px;
	height: 60px;
	border-radius: 100%;
	background-color: #ff3cb2;
	opacity: 0;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation: ball-scale-multiple 1s 0s linear infinite;
	animation: ball-scale-multiple 1s 0s linear infinite
}

@-webkit-keyframes ball-scale-multiple {
	0% {
		opacity: 0;
		-webkit-transform: scale(0);
		transform: scale(0)
	}

	5% {
		opacity: 1
	}

	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes ball-scale-multiple {
	0%,to {
		opacity: 0
	}

	0% {
		-webkit-transform: scale(0);
		transform: scale(0)
	}

	5% {
		opacity: 1
	}

	to {
		opacity: 0;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

</style>

第二步

找到你网站头部代码的<body>标签,在<body>之前添加以下代码

这段代码就是动画的显示代码了,添加在网页本身<body>之前可以让它先显示出来

<body>
<div class="qj_loading" style="position: fixed; background: rgb(255, 255, 255); width: 100%; margin-top: -150px; height: 300%; z-index: 99999999; display: none;">
	<div style="position:fixed;top:0;left:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center">
		<div class="qjdh_no6">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
</div>
</body>

第三步

找到你网站底部代码最下方的</body>结束标签,在</body>前面添加以下代码:

前两步已经实现加载动画的显示了,而这一步就是要在页面加载之后让它不显示(也就是关闭动画),总不能只显示动画吧

<script type="text/javascript">
$(document).ready(function() {
	$('.qj_loading').delay(400).fadeOut(500).delay(1000, function() {
		$(this).remove()
	})
})
</script>

教程结束,实现的效果和上面图片一至

本站 loading动画展示

本站主题已经内置了10款不同的全局动画效果,部分效果图如下:

广告位,电脑和手机可分别设置,可放任何广告代码
赞 33 打赏
分享海报
版权声明
分享是一种美德,转载请注明地址
文章地址:倾微博客 » 三步给你的网站添加全局loading动画
广告位,电脑和手机可分别设置,可放任何广告代码

评论 1

  • *
  • *
图片正在生成中,请稍后...

周三

11/20

三步给你的网站添加全局loading动画 超简单实用教程

loading动画大家都知道,很多网站的页面加载都有这样的切换动画, 不仅炫酷好看,还可以让加载等待的时间更加有趣。很简单,一共三步,就能实现本站一样的全局加载loading动画 第一步 找到你网站的头部代码,在<head>标签内加入以下代码: 这段代码实际就是全局动画的css样式,有能力的可以自行修改。 <style type='text/css

还不错吧!打赏支持一下呗

支付宝扫一扫打赏

微信扫一扫打赏

登录

记住我

注册