前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >handsome模板Pjax加载

handsome模板Pjax加载

作者头像
用户2590762
发布2021-08-11 16:49:43
9820
发布2021-08-11 16:49:43
举报
文章被收录于专栏:Q青之家Q青之家

HTML:

代码语言:javascript
复制
<section id="loading" class="loading hide">
<div class="containerss">
            <div class="one common"></div>
            <div class="two common"></div>
            <div class="three common"></div>
            <div class="four common"></div>
            <div class="five common"></div>
            <div class="six common"></div>
            <div class="seven common"></div>
            <div class="eight common"></div>
        </div>
</section>

CSS:

代码语言:javascript
复制
@charset "utf-8";.loading{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;}.containerss{width:40vw;height:40vw;left:0;right:0;top:0;bottom:0;margin:auto;}.common{height:5vw;max-height:100%;overflow:auto;width:2vw;margin:auto;max-width:100%;position:absolute;background-color:;border-radius:0vw 10vw 0vw 10vw;box-shadow:inset 0vw 0vw 0vw .1vw #E645D0,0vw 0vw 1.5vw 0vw #E645D0;}.one{transform:rotate(45deg);left:0;right:0;top:0;bottom:7.5vw;}.two{transform:rotate(90deg);left:5.5vw;right:0;top:0;bottom:5.5vw;}.three{transform:rotate(135deg);left:7.5vw;right:0;top:0;bottom:0;}.four{transform:rotate(180deg);left:5.5vw;right:0;top:5.5vw;bottom:0;}.five{transform:rotate(225deg);left:0;right:0;top:7.5vw;bottom:0;}.six{transform:rotate(270deg);left:0;right:5.5vw;top:5.5vw;bottom:0;}.seven{transform:rotate(315deg);left:0;right:7.5vw;top:0;bottom:0;}.eight{transform:rotate(360deg);left:0;right:5.5vw;top:0;bottom:5.5vw;}.one{animation:one 1s ease infinite;-moz-animation:one 1s ease infinite;-webkit-animation:one 1s ease infinite;-o-animation:one 1s ease infinite;}@keyframes one{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.two{animation:two 1s .125s ease infinite;-moz-animation:two 1s .125s ease infinite;-webkit-animation:two 1s .125s ease infinite;-o-animation:two 1s .125s ease infinite;}@keyframes two{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.three{animation:three 1s .25s ease infinite;-moz-animation:three 1s .25s ease infinite;-webkit-animation:three 1s .25s ease infinite;-o-animation:three 1s .25s ease infinite;}@keyframes three{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.four{animation:four 1s .375s ease infinite;-moz-animation:four 1s .375s ease infinite;-webkit-animation:four 1s .375s ease infinite;-o-animation:four 1s .375s ease infinite;}@keyframes four{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.five{animation:five 1s .5s ease infinite;-moz-animation:five 1s .5s ease infinite;-webkit-animation:five 1s .5s ease infinite;-o-animation:five 1s .5s ease infinite;}@keyframes five{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.six{animation:six 1s .625s ease infinite;-moz-animation:six 1s .625s ease infinite;-webkit-animation:six 1s .625s ease infinite;-o-animation:six 1s .625s ease infinite;}@keyframes six{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.seven{animation:seven 1s .750s ease infinite;-moz-animation:seven 1s .750s ease infinite;-webkit-animation:seven 1s .750s ease infinite;-o-animation:seven 1s .750s ease infinite;}@keyframes seven{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.eight{animation:eight 1s .875s ease infinite;-moz-animation:eight 1s .875s ease infinite;-webkit-animation:eight 1s .875s ease infinite;-o-animation:eight 1s .875s ease infinite;}@keyframes eight{0%,100%{}50%{background:;box-shadow:inset 0vw 0vw 0vw .1vw #17E1E6,0vw 0vw 1.5vw 0vw #17E1E6;}}.containerss{animation:containerss 5s linear infinite;-moz-animation:containerss 5s linear infinite;-webkit-animation:containerss 5s linear infinite;-o-animation:containerss 5s linear infinite;}@keyframes containerss{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-04-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档