一个pjax的loading效果

效果图;

1.png

html代码:

<div class="loading">
  <div class="loading2">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>
css代码:

.loading{height:100%;width:100%;position:fixed;top:0;left:0;z-index:1000;background-color:rgba(90,90,90,.5)}
.loading2{position:absolute;top:50%;left:50%;z-index:1000;margin:-46px 0 0 -46px;width:92px;height:92px}
.loading .block{width:40px;height:40px;position:absolute;top:5;left:0}
.loading .block:nth-child(1){top:0;left:0;right:auto;bottom:auto;-webkit-animation:top-left 1s infinite;background-color:#00aacf}
.loading .block:nth-child(2){top:0;left:50px;right:auto;bottom:auto;-webkit-animation:top-right 1s infinite;background-color:#f6c574}
.loading .block:nth-child(3){top:50px;left:0;right:auto;bottom:auto;-webkit-animation:bottom-left 1s infinite;background-color:#fc5652}
.loading .block:nth-child(4){top:50px;left:50px;right:auto;bottom:auto;-webkit-animation:bottom-right 1s infinite;background-color:#00b3a0}
@-webkit-keyframes top-left{0%{left:0;top:0}
25%{left:50px;top:0;-webkit-transform:rotate(90deg)}
50%{left:50px;top:50px;-webkit-transform:rotate(180deg)}
75%{left:0;top:50px;-webkit-transform:rotate(270deg)}
100%{left:0;top:0;-webkit-transform:rotate(360deg)}}
@-webkit-keyframes top-right{0%{left:50px;top:0}
25%{left:50px;top:50px}
50%{left:0;top:50px}
75%{left:0;top:0}
100%{left:50px;top:0}}
@-webkit-keyframes bottom-left{0%{left:50px;top:50px}
25%{left:0;top:50px;-webkit-transform:rotate(90deg)}
50%{left:0;top:0;-webkit-transform:rotate(180deg)}
75%{left:50px;top:0;-webkit-transform:rotate(270deg)}
100%{left:50px;top:50px;-webkit-transform:rotate(360deg)}}
@-webkit-keyframes bottom-right{0%{left:0;top:50px}
25%{left:0;top:0}
50%{left:50px;top:0}
75%{left:50px;top:50px}
100%{left:0;top:50px}}
@-moz-keyframes spinPulse{0%{box-shadow:0 0 1px #505050;opacity:0;-moz-transform:rotate(160deg);}
50%{opacity:1;-moz-transform:rotate(145deg);}
100%{opacity:0;-moz-transform:rotate(-320deg);}}
@-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg);}
100%{-moz-transform:rotate(360deg);}}
@-webkit-keyframes spinPulse{0%{box-shadow:0 0 1px #505050;opacity:0;-webkit-transform:rotate(160deg);}
50%{opacity:1;-webkit-transform:rotate(145deg);}
100%{opacity:0;-webkit-transform:rotate(-320deg);}}
@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}}
@-o-keyframes spinPulse{0%{box-shadow:0 0 1px #505050;opacity:0;-o-transform:rotate(160deg);}
50%{opacity:1;-o-transform:rotate(145deg);}
100%{opacity:0;-o-transform:rotate(-320deg);}}
@-o-keyframes spinoffPulse{0%{-o-transform:rotate(0deg);}
100%{-o-transform:rotate(360deg);}}
@-ms-keyframes spinPulse{0%{box-shadow:0 0 1px #505050;opacity:0;-ms-transform:rotate(160deg);}
50%{opacity:1;-ms-transform:rotate(145deg);}
100%{opacity:0;-ms-transform:rotate(-320deg);}}
@-ms-keyframes spinoffPulse{0%{-ms-transform:rotate(0deg);}
100%{-ms-transform:rotate(360deg);}}
.loading, .loading2{display:none}

版权属于emlog大博客 www.adfun.cn 未经允许不得转载emlog大博客 » 一个pjax的loading效果


分享到:更多 ()

评论 1

  • QQ (选填)
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 这个加在哪个文件 回复