/*初始化111*/ #pageloader{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:2000} #pageloader::after,#pageloader::before{content:"";display:block;position:absolute;left:0;width:100%;height:50%;background:#000;z-index:-1;-webkit-transition:all 1.2s cubic-bezier(.77,0,.175,1) 0s;transition:all 1.2s cubic-bezier(.77,0,.175,1) 0s} #pageloader::before{top:0} #pageloader::after{bottom:0} #pageloader .loader-icon{-webkit-transition:all .5s ease 0s;transition:all .5s ease 0s} #pageloader.hiden::after,#pageloader.hiden::before{height:0} #pageloader.hiden .loader-icon{opacity:0} .loader-icon{position:absolute;top:50%;left:50%;width:30px;height:30px;margin-top:-15px;margin-left:-15px} .loader-icon .circular{width:100%;height:100%;-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center} .loader-icon .circular .path{stroke-dasharray:1,200;stroke-dashoffset:0;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round} @-webkit-keyframes dash { 0% { stroke-dasharray:1,200; stroke-dashoffset:0 } 50% { stroke-dasharray:89,200; stroke-dashoffset:-35px } 100% { stroke-dasharray:89,200; stroke-dashoffset:-124px } }@keyframes dash { 0% { stroke-dasharray:1,200; stroke-dashoffset:0 } 50% { stroke-dasharray:89,200; stroke-dashoffset:-35px } 100% { stroke-dasharray:89,200; stroke-dashoffset:-124px }