Choice over effort.

Home / posts/2687.html

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 # 强制开启loading动画的时间 1000=1s,默认为0.5s
文章作者: 闲花
文章链接: https://www.islu.cn/posts/2687.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 闲花博客 | Lu's Blog
  • 赏
    alipay wechat 饲养员名单