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

旧城等待， 2021-06-26 16:06 600阅读 0赞

使用方法：

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

github地址：[https://github.com/yyzheng1729/loading][https_github.com_yyzheng1729_loading]

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

# 第一种：实心球 #

效果图片如下：

![70][]

源码如下：

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();

# 第二种：条形 #

效果图如下：

![70 1][]

源码如下：

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 代码：

# 福利： #

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

# 代码： #

![70 2][]

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
        </head>
        <style>
        	.modal {
    		    position: fixed;
    		    top: 0;	
    		    right: 0;
    		    bottom: 0;
    		    left: 0;
    		    overflow: hidden;
    		    outline: 0;
    		    -webkit-overflow-scrolling: touch;
    		    background-color: rgb(0, 0, 0);  
    		    filter: alpha(opacity=60);  
    		    background-color: rgba(0, 0, 0, 0.6); 
    		    z-index: 1;
    		}
    		.test{
    			position:fixed;
    			width:200px;
    			height:200px;
    			background-color:red;
    			z-index:9999;
    		}
        </style>
        <body>
        	<div class="test">
        		我来测试一下是否真的实现遮掩效果！！！
        	</div>
        	<div class="modal" style="display: block;"></div>
        </body>
    </html>

[https_github.com_yyzheng1729_loading]: https://github.com/yyzheng1729/loading
[70]: /images/20210626/d1ff84c1cd06425485a1de86ff9e06b3.png
[70 1]: /images/20210626/dfa818cc068f446a8bd3ccd0e33b97e9.png
[70 2]: /images/20210626/3dedf2fe9345407cb40379ca7d101267.png