Hexo页面加载动画(吃豆豆)
发表于
2021-05-25
|
更新于
2021-05-25
总字数:
784 |
阅读时长:
4分钟
|
阅读量:
Loading 吃豆豆动画
新建 loading.ejs 文件
在_partial
文件夹下新建loading.ejs
添加以下代码
<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
<% if (theme.loading.enable) { %> <!-- 加载动画,强制加载0.5s --> <%- partial('_partial/loading') %> <% } %>
|
添加配置文件
在主题配置文件(_config.yml
)下添加以下配置
loading: enable: true time: 500
|
版权声明:
本博客所有文章除特别声明外,均采用
CC BY-NC-SA 4.0 许可协议。转载请注明来自
aloeJun | Lu's Blog