Hexo页面加载动画(吃豆豆)
发表于 2021-05-25 | 更新于 2021-05-25
总字数: 787 | 阅读时长: 4分钟 | 阅读量:
Loading 吃豆豆动画
新建 loading.ejs 文件
在_partial
文件夹下新建loading.ejs
添加以下代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141
| <style type="text/css"> #loading-container{ position: fixed; top: 0; left: 0; min-height: 100vh; width: 100vw; z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #FFF; text-align: center; /* loader页面消失采用渐隐的方式*/ -webkit-transition: opacity 1s ease; -moz-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease; } .loading-image{ width: 120px; height: 50px; transform: translate(-50%); }
.loading-image div:nth-child(2) { -webkit-animation: pacman-balls 1s linear 0s infinite; animation: pacman-balls 1s linear 0s infinite }
.loading-image div:nth-child(3) { -webkit-animation: pacman-balls 1s linear .33s infinite; animation: pacman-balls 1s linear .33s infinite }
.loading-image div:nth-child(4) { -webkit-animation: pacman-balls 1s linear .66s infinite; animation: pacman-balls 1s linear .66s infinite }
.loading-image div:nth-child(5) { -webkit-animation: pacman-balls 1s linear .99s infinite; animation: pacman-balls 1s linear .99s infinite }
.loading-image div:first-of-type { width: 0; height: 0; border: 25px solid #49b1f5; border-right-color: transparent; border-radius: 25px; -webkit-animation: rotate_pacman_half_up .5s 0s infinite; animation: rotate_pacman_half_up .5s 0s infinite; } .loading-image div:nth-child(2) { width: 0; height: 0; border: 25px solid #49b1f5; border-right-color: transparent; border-radius: 25px; -webkit-animation: rotate_pacman_half_down .5s 0s infinite; animation: rotate_pacman_half_down .5s 0s infinite; margin-top: -50px; } @-webkit-keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}
@keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}
@-webkit-keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}
@keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}
@-webkit-keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}
@keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}
.loading-image div:nth-child(3), .loading-image div:nth-child(4), .loading-image div:nth-child(5), .loading-image div:nth-child(6){ background-color: #49b1f5; width: 15px; height: 15px; border-radius: 100%; margin: 2px; width: 10px; height: 10px; position: absolute; transform: translateY(-6.25px); top: 25px; left: 100px; } .loading-text{ margin-bottom: 20vh; text-align: center; color: #2c3e50; font-size: 2rem; box-sizing: border-box; padding: 0 10px; text-shadow: 0 2px 10px rgba(0,0,0,0.2); } @media only screen and (max-width: 500px) { .loading-text{ font-size: 1.5rem; } } .fadeout { opacity: 0; filter: alpha(opacity=0); } /* logo出现动画 */ @-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}} @keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);}} </style> <div id="loading-container"> <p class="loading-text">嘘 ~ 正在从服务器偷取页面 . . . </p> <div class="loading-image"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <script> (function () { const loaded = function () { setTimeout(function () { const loader = document.getElementById("loading-container"); loader.className = "fadeout"; setTimeout(function () { loader.style.display = "none"; }, 500); }, <%- theme.loading.time %>); }; loaded(); })(); </script>
|
引用 ejs 文件
在 layout.ejs
中引用loading.ejs
1 2 3 4
| <% if (theme.loading.enable) { %> <!-- 加载动画,强制加载0.5s --> <%- partial('_partial/loading') %> <% } %>
|
添加配置文件
在主题配置文件(_config.yml
)下添加以下配置
1 2 3 4
| loading: enable: true time: 500
|
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 闲花博客 | Lu's Blog