记录:WP网站过度动画效果实现

热门标签

, , ,
首页 » 技术分享 » 正文

 

CSS样式

.loader-background {
	overflow:hidden;
	position:fixed;
	width:100%;
	height:100%;
	z-index:9999999;
	top:0;
	pointer-events:none;
	background:rgba(255,255,255,0.5);
}
.spinner {
	margin:100px auto;
	width:40px;
	height:40px;
	position:relative;
	text-align:center;
	-webkit-animation:sk-rotate 2.0s infinite linear;
	animation:sk-rotate 2.0s infinite linear;
}
.dot1,.dot2 {
	width:60%;
	height:60%;
	display:inline-block;
	position:absolute;
	top:0;
	background-color:#0da872;
	border-radius:100%;
	-webkit-animation:sk-bounce 2.0s infinite ease-in-out;
	animation:sk-bounce 2.0s infinite ease-in-out;
}
.dot2 {
	top:auto;
	bottom:0;
	-webkit-animation-delay:-1.0s;
	animation-delay:-1.0s;
}
@-webkit-keyframes sk-rotate {
	100% {
	-webkit-transform:rotate(360deg)
}
}@keyframes sk-rotate {
	100% {
	transform:rotate(360deg);
	-webkit-transform:rotate(360deg)
}
}@-webkit-keyframes sk-bounce {
	0%,100% {
	-webkit-transform:scale(0.0)
}
50% {
	-webkit-transform:scale(1.0)
}
}@keyframes sk-bounce {
	0%,100% {
	transform:scale(0.0);
	-webkit-transform:scale(0.0);
}
50% {
	transform:scale(1.0);
	-webkit-transform:scale(1.0);
}
}

 

 

将加载层添加的<body>顶部

<!-- Loader animation begin -->
<div id="pre-loader" class="loader-background">
	<div class="spinner">
		<div class="dot1">
		</div>
		<div class="dot2">
		</div>
	</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script type="text/javascript" language="JavaScript">
	//: 判断网页是否加载完成
document.onreadystatechange = function() {
    if (document.readyState == "complete") {
        $("#pre-loader").fadeOut("slow");
        document.getElementById("pre-loader").remove();
    }
}
</script>
<!-- Loader animation stop -->

自定义头部代码中

未经允许不得转载:作者:@sunshine, 转载或复制请以 超链接形式 并注明出处 Sunshine博客
原文地址:《记录:WP网站过度动画效果实现》 发布于2019-10-11

分享到:
赞(0) 打赏

评论 抢沙发

评论前必须登录!

  注册



觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

返利小助手
返利小助手:购物就会返利的小助手,承担你一年的购物开销返利。剁手党福利。省钱购物赚钱
切换注册

登录

忘记密码 ?

切换登录

注册