页面加载动画的实现

通过css3实现页面的加载动画

效果图

页面加载动画的实现_第1张图片

js用到两个方法:

  1. document.onreadystatechange 页面加载状态改变时的事件
  2. document.readyState  返回当前文档的状态

body结构

css

*{
				margin: 0;
				padding: 0;
			}
			.loading{
				position: fixed;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				z-index: 100;
				background: #fff;
			}
			.pic{
				width: 50px;
				height: 50px;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
			.pic i{
				display: block;
				float: left;
				width: 6px;
				height: 50px;
				margin: 0 2px;
				background: #007DDB;
				-webkit-transform: scaleY(0.4);
				    -ms-transform: scaleY(0.4);
				        transform: scaleY(0.4);
				-webkit-animation: load 1.2s infinite;
				        animation: load 1.2s infinite;
			}
			i:nth-child(1){}
			i:nth-child(2){
				-webkit-animation-delay: 0.1s;
				        animation-delay: 0.1s;
			}
			i:nth-child(3){
				-webkit-animation-delay: 0.2s;
				        animation-delay: 0.2s;
			}
			i:nth-child(4){
				-webkit-animation-delay: 0.3s;
				        animation-delay: 0.3s;
			}
			i:nth-child(5){
				-webkit-animation-delay: 0.4s;
				        animation-delay: 0.4s;
			}
			@-webkit-keyframes load{
				0%,40%,100%{
					-webkit-transform: scaleY(0.4);
					        transform: scaleY(0.4)
				}
				20%{
					-webkit-transform: scaleY(1);
					        transform: scaleY(1)
				}
			}
			@keyframes load{
				0%,40%,100%{
					-webkit-transform: scaleY(0.4);
					        transform: scaleY(0.4)
				}
				20%{
					-webkit-transform: scaleY(1);
					        transform: scaleY(1)
				}
			}

js部分

 

你可能感兴趣的:(页面加载动画的实现)