各种页面加载动画 （附源码）

使用方法：

1.可以直接到我的 github 上下载整个项目的源码。

github地址：https://github.com/yyzheng1729/loading

2.直接复制下面的代码（记得自己引入 jquery 文件）

 

第一种：实心球

效果图片如下：

源码如下：

html 代码：

 

css 代码：

.sk-three-bounce {
	/*使用弹性布局让加载动画持续会于页面中央，不随滚动条变化*/
	position: fixed;
	top: 50%;
	left: 50%;
}

.sk-three-bounce .sk-child {
	/*在这里设置加载球的大小*/
	width: 30px;
	height: 30px;
	/*加载求的颜色在这里修改*/
	background-color: green;
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
	animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}

.sk-three-bounce .sk-bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.sk-three-bounce .sk-bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

@-webkit-keyframes sk-three-bounce {
	0%,80%,100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}

	40% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes sk-three-bounce {
	0%,80%,100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}

	40% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

 

js 代码：

 

/*可以使用下面的两个语句来实现loading动画的显示和隐藏*/
$("#sk-three-bounce").hide();
$("#sk-three-bounce").show();

 

第二种：条形

效果图如下：

源码如下：

html 代码：

css 代码：

.sk-wave {
	position: fixed;
	top: 50%;
	left: 50%;
	margin: 40px auto;
	width: 50px;
	height: 40px;
	text-align: center;
	font-size: 10px;
}

.sk-wave .sk-rect {
	background-color: green;
	height: 100%;
	width: 6px;
	display: inline-block;
	-webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
	animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
}

.sk-wave .sk-rect1 {
	-webkit-animation-delay: -1.2s;
	animation-delay: -1.2s;
}

.sk-wave .sk-rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}

.sk-wave .sk-rect3 {
	-webkit-animation-delay: -1s;
	animation-delay: -1s;
}

.sk-wave .sk-rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}

.sk-wave .sk-rect5 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}

@-webkit-keyframes sk-waveStretchDelay {
	0%, 40%, 100% {
		-webkit-transform: scaleY(0.4);
		transform: scaleY(0.4);
	}

	20% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
	}
}

@keyframes sk-waveStretchDelay {
	0%, 40%, 100% {
		-webkit-transform: scaleY(0.4);
		transform: scaleY(0.4);
	}

	20% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
	}
}

Js 代码：

 

 

 

福利：

 

一般使用加载动画的话，都需要用到一个功能，叫做遮掩。下面直接贴带

代码：

 

    
        
    
    
    
    	

    		我来测试一下是否真的实现遮掩效果！！！