作者自己挖的坑没有填,估计已经忘记了

QQ截图20201205110734.jpg

主题设置PJAX

1. 选择自定义PJAX动画

2. 填写HTML结构

3. 填写css代码

QQ截图20201205110526.jpg

动画代码直接复制粘贴

动画一

动画1

  • 自定义pjax动画的HTML结构 
<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>
  • 自定义pjax动画的CSS代码 
@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);}}

动画二

动画2

  • 自定义pjax动画的HTML结构 
<section id="loading" class="loading hide">
<div class="containerss">
  <svg version="1.2" height="300" width="600" xmlns="http://www.w3.org/2000/svg"
    viewport="0 0 60 60" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="pulsar" stroke="rgba(0,155,155,1)" fill="none" stroke-width="1"stroke-linejoin="round" d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210" /> 
</svg>
</div>
</section>
  • 自定义pjax动画的CSS代码 
.loading{display:flex;position:fixed;top:0;left:0;width:100%;height:100%}.containerss{left:0;right:0;top:0;bottom:0;margin:auto}.loading svg{width:100%;height:100%}.loading #pulsar{stroke-dasharray:281;-webkit-animation:dash 2.5s infinite linear forwards}@-webkit-keyframes dash{from{stroke-dashoffset:814}to{stroke-dashoffset:-814}}

动画三

动画3

  • 自定义pjax动画的HTML结构 
<section id="loading" class="loading hide">
<div class="loading">
    <div class="loadtext">Loading...</div>
    <div class="horizontal">
      <div class="circlesup">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
      </div>
      <div class="circlesdwn">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
      </div>
    </div>
    <div class="vertical">
      <div class="circlesup">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
      </div>
      <div class="circlesdwn">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
      </div>
    </div>
</div>
</section>
  • 自定义pjax动画的CSS代码 
@charset "utf-8";.loading{display:flex;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-mos-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;}.loadtext{position:absolute;left:-1.3em;top:-1.7em;-webkit-animation:text 2s infinite;-moz-animation:text 2s infinite;-moz-animation:text 2s infinite;-ms-animation:text 2s infinite;-o-animation:text 2s infinite;animation:text 2s infinite;}.vertical{position:absolute;top:-1.84em;left:-0.4em;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);}.horizontal{position:absolute;top:0em;left:0em;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}.circlesup{position:absolute;top:-4.7em;right:12.1em;}.circlesdwn{position:absolute;top:2.5em;right:-13.5em;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);}.circle{position:absolute;width:15em;height:15em;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-animation:orbit 2s infinite;-moz-animation:orbit 2s infinite;-moz-animation:orbit 2s infinite;-ms-animation:orbit 2s infinite;-o-animation:orbit 2s infinite;animation:orbit 2s infinite;z-index:5;}.circle:after{content:'';position:absolute;width:2em;height:2em;-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;-o-border-radius:100%;border-radius:100%;background:#13A3A5;}.circle:nth-child(2){-webkit-animation-delay:100ms;-moz-animation-delay:100ms;-ms-animation-delay:100ms;-o-animation-delay:100ms;animation-delay:100ms;z-index:4;}.circle:nth-child(2):after{background:#56bebf;-webkit-transform:scale(0.8,0.8);-moz-transform:scale(0.8,0.8);-ms-transform:scale(0.8,0.8);-o-transform:scale(0.8,0.8);transform:scale(0.8,0.8);}.circle:nth-child(3){-webkit-animation-delay:225ms;-moz-animation-delay:225ms;-ms-animation-delay:225ms;-o-animation-delay:225ms;animation-delay:225ms;z-index:3;}.circle:nth-child(3):after{background:#ffa489;-webkit-transform:scale(0.6,0.6);-moz-transform:scale(0.6,0.6);-ms-transform:scale(0.6,0.6);-o-transform:scale(0.6,0.6);transform:scale(0.6,0.6);}.circle:nth-child(4){-webkit-animation-delay:350ms;-moz-animation-delay:350ms;-ms-animation-delay:350ms;-o-animation-delay:350ms;animation-delay:350ms;z-index:2;}.circle:nth-child(4):after{background:#ff6d37;-webkit-transform:scale(0.4,0.4);-moz-transform:scale(0.4,0.4);-ms-transform:scale(0.4,0.4);-o-transform:scale(0.4,0.4);transform:scale(0.4,0.4);}.circle:nth-child(5){-webkit-animation-delay:475ms;-moz-animation-delay:475ms;-ms-animation-delay:475ms;-o-animation-delay:475ms;animation-delay:475ms;z-index:1;}.circle:nth-child(5):after{background:#DB2F00;-webkit-transform:scale(0.2,0.2);-moz-transform:scale(0.2,0.2);-ms-transform:scale(0.2,0.2);-o-transform:scale(0.2,0.2);transform:scale(0.2,0.2);}@-webkit-keyframes orbit{0%{-webkit-transform:rotate(45deg);}5%{-webkit-transform:rotate(45deg);-webkit-animation-timing-function:ease-out;}70%{-webkit-transform:rotate(405deg);-webkit-animation-timing-function:ease-in;}100%{-webkit-transform:rotate(405deg);}}@-moz-keyframes orbit{0%{-moz-transform:rotate(45deg);}5%{-moz-transform:rotate(45deg);-moz-animation-timing-function:ease-out;}70%{-moz-transform:rotate(405deg);-moz-animation-timing-function:ease-in;}100%{-moz-transform:rotate(405deg);}}@-ms-keyframes orbit{0%{-ms-transform:rotate(45deg);}5%{-ms-transform:rotate(45deg);-ms-animation-timing-function:ease-out;}70%{-ms-transform:rotate(405deg);-ms-animation-timing-function:ease-in;}100%{-ms-transform:rotate(405deg);}}@-o-keyframes orbit{0%{-o-transform:rotate(45deg);}5%{-o-transform:rotate(45deg);-o-animation-timing-function:ease-out;}70%{-o-transform:rotate(405deg);-o-animation-timing-function:ease-in;}100%{-o-transform:rotate(405deg);}}@keyframes orbit{0%{transform:rotate(45deg);}5%{transform:rotate(45deg);animation-timing-function:ease-out;}70%{transform:rotate(405deg);animation-timing-function:ease-in;}100%{transform:rotate(405deg);}}@-webkit-keyframes text{0%{-webkit-transform:scale(0.2,0.2);-webkit-animation-timing-function:ease-out;}40%,60%{-webkit-transform:scale(1,1);-webkit-animation-timing-function:ease-out;}70%,100%{-webkit-transform:scale(0.2,0.2);}}@-moz-keyframes text{0%{-moz-transform:scale(0.2,0.2);-moz-animation-timing-function:ease-out;}50%{-moz-transform:scale(1,1);-moz-animation-timing-function:ease-out;}60%{-moz-transform:scale(1,1);-moz-animation-timing-function:ease-out;}100%{-moz-transform:scale(0.2,0.2);}}@-mos-keyframes text{0%{-mos-transform:scale(0.2,0.2);-mos-animation-timing-function:ease-out;}50%{-mos-transform:scale(1,1);-mos-animation-timing-function:ease-out;}60%{-mos-transform:scale(1,1);-mos-animation-timing-function:ease-out;}100%{-mos-transform:scale(0.2,0.2);}}@-o-keyframes text{0%{-o-transform:scale(0.2,0.2);-o-animation-timing-function:ease-out;}50%{-o-transform:scale(1,1);-o-animation-timing-function:ease-out;}60%{-o-transform:scale(1,1);-o-animation-timing-function:ease-out;}100%{-o-transform:scale(0.2,0.2);}}@keyframes text{0%{transform:scale(0.2,0.2);animation-timing-function:ease-out;}50%{transform:scale(1,1);animation-timing-function:ease-out;}60%{transform:scale(1,1);animation-timing-function:ease-out;}100%{transform:scale(0.2,0.2);}}

动画四

动画4

  • 自定义pjax动画的HTML结构 
<section id="loading" class="loading hide">
<div class="loading containerss">
<div class="loader">Loading</div>
</div>
</section>
  • 自定义pjax动画的CSS代码 
.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}.loader{width:150px;height:150px;line-height:150px;margin:auto;position:relative;z-index:0;box-sizing:border-box;text-align:center;color:#fff;text-transform:uppercase}.loader:before,.loader:after{opacity:0;box-sizing:border-box;content:"\0020";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:100px;border:5px solid #fff;box-shadow:0 0 50px #fff,inset 0 0 50px #fff}.loader:after{z-index:1;-webkit-animation:gogoloader 2s infinite 1s}.loader:before{z-index:2;-webkit-animation:gogoloader 2s infinite}@-webkit-keyframes gogoloader{0%{-webkit-transform:scale(0);opacity:0}50%{opacity:1}100%{-webkit-transform:scale(1);opacity:0}}
最后修改：2021 年 02 月 23 日 02 : 06 PM
© 允许规范转载
如果觉得我的文章对你有用，无需赞赏用心感谢！