【Hugo】博客引入页面加载动画

|
|
|

博客刷新加载时引入加载动画，功能性一般般，但非常的酷炫

教程
Hugo

1 写轮眼加载动画

  • 这边先介绍如何引入本博客的加载动画，直接复制就能实现，适用于代码二次开发能力不强的用户
  • “授人以鱼不如授人以渔"，后面会教大家如何引入自己想要的加载动画

1.1 基本引入

  • 将以下代码复制进layouts/partials/head/custom.html(文件不存在则自行创建)
  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
142
143
144
145
146
147
148
149
150
151
152
153
154

<div class="loading">
    <div class="sharingon">
        <div class="ring">
            <div class="to"></div>
            <div class="to"></div>
            <div class="to"></div>
            <div class="circle"></div>
        </div>
    </div>
</div>

<style>
    .loading {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        zoom: 3.0;
        background-color: #f5f5fa;
    }
	
    .animated-stop {
        animation-play-state: paused !important;
    }
	
    .scaleAndFadeout {
        animation: scaleAndFadeOut 1.5s forwards;
    }
	
    /** 放大1.5倍，并渐变到透明 */
    @keyframes scaleAndFadeOut {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        100% {
            transform: scale(1.5);
            opacity: 0;
        }
    }

    /* From Uiverse.io by shadowfax29 */
    .sharingon {
        position: relative;
        width: 6em;
        height: 6em;
        background-color: red;
        border: 6px solid black;
        animation: rot 1s ease-in-out infinite;
    }

    .ring {
        position: absolute;
        content: "";
        left: 50%;
        top: 50%;
        width: 3.5em;
        height: 3.5em;
        border: 4px solid rgb(110, 13 ,13 ,0.5);
        transform: translate(-50%,-50%);
    }

    .sharingon, .ring, .to,.circle {
        border-radius: 50%;
    }

    .to,.circle {
        position: absolute;
        content: "";
        width: 0.9em;
        height: 0.9em;
        background-color: black;
    }

    .to:nth-child(1) {
        top: -0.5em;
        left: 50%;
        transform: translate(-40%);
    }

    .to::before {
        content: "";
        position: absolute;
        top: -0.5em;
        right: -0.2em;
        width: 1.1em;
        height: 0.9em;
        box-sizing: border-box;
        border-left: 16px solid black;
        border-radius: 100% 0 0;
    }

    .to:nth-child(2) {
        bottom: 0.5em;
        left: -0.35em;
        transform: rotate(-120deg);
    }

    .to:nth-child(3) {
        bottom: 0.5em;
        right: -0.35em;
        transform: rotate(120deg);
    }

    .circle {
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        box-shadow: 0 0 20px 1px;
        width: 1em;
        height: 1em;
    }

    @keyframes rot {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>

<script>	
    function initLoading() {
        let loading = document.querySelector(".loading");
        document.addEventListener('DOMContentLoaded', function() {
            // 本地页面加载速度快，可自行使用setTimeout()来进行延迟，体验加载动画效果
            // 执行加载完成动画
            loadFinish();
            // 延迟1.5s，待加载完成动画执行结束
            setTimeout(() => {
                loading.style.display = "none";
            }, 1500)
        });
    }
	
    function loadFinish() {
        // 暂停动画
        let sharingon= document.querySelector(".sharingon");
        sharingon.classList.add("animated-stop")
        // 放大并渐变到透明
        let loading = document.querySelector(".loading");
        loading.classList.add("scaleAndFadeout")
    }
	
    initLoading();
</script>

1.2 动画首次加载

  • 每次切换页面都播放一次加载动画，这种看个人喜欢。
  • 我个人是不太喜欢的，我只希望第一次打开这页面的时候加载一下就好

1.2.1 PJAX

1.2.2 SessionStorage

  • PJAX技术对大部分轻度用户来说还是有点困难的，可以用SessionStorage存储一下页面是否已经播放过加载动画了，播放过了就不重新播放一遍，来平替PJAX技术

  • (1) 将display改为none，默认不显示加载动画

1
2
3
4
5
6

<style>
    .loading {
        ...
        display: none;
    }
</style>
  • (2) 修改initLoading方法
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<script>
    function initLoading() {
        let loading = document.querySelector(".loading");
        const isFirstVisit = !sessionStorage.getItem('visited');
        if (isFirstVisit) {
            loading.style.display = "flex";
            document.addEventListener('DOMContentLoaded', function() {
                // 执行加载完成动画
                loadFinish();
                // 延迟1.5s，待加载完成动画执行结束
                setTimeout(() => {
                    loading.style.display = "none";
                }, 1500)
                sessionStorage.setItem('visited', 'true');
            });
        }
    }
</script>
  • (3) 这样就只有首次进入此网站时才播放加载动画，页面关闭后重新进入才再次播放加载动画

2 自定义加载动画

2.1 基本引入

  • (1) 前往UIverse，寻找自己喜欢的加载动画

  • (2) 将加载动画的html，css分别复制到下面的模板，然后将模板内容复制到layouts/partials/head/custom.html
 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

<div class="loading">
    <!-- html内容 -->
</div>

<style>
    .loading {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        background-color: #f5f5fa;
    }
	
    /* css内容 */
</style>

<script>	
    function initLoading() {
        let loading = document.querySelector(".loading");
        document.addEventListener('DOMContentLoaded', function() {
            // 本地页面加载速度快，可自行使用setTimeout()来进行延迟，体验加载动画效果
            loading.style.display = "none";
        });
    }

    initLoading();
</script>
  • 这样就能实现最基本的加载动画效果

2.2 样式修改

  • 因为每个人的加载动画都不一致，这边只分享一下可能会用到的css样式，实际情况还需自己自行适配
  • 也可以参考上面的写轮眼动画的写法，来模仿写法
  • CSS样式
 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

/**
 * 可能会用到的CSS
 */
{
    /* 整体修改元素大小(大于1放大, 小于1缩小) */
    zoom: 1.0;

    /* 开始动画播放 */
    animation-play-state: running;

    /* 暂停动画播放 */
    animation-play-state: paused;

    /* 元素居中(flex布局) */
    display: flex;
    justify-content: center;
    align-items: center;

    /* 元素隐藏 */
    display: none;

    /* 定义动画 */
    @keyframes 动画名 {
        0% {}
        进度% {}
        100% {}
    }

    /* 执行动画 */
    animation: 动画名 时间;
}
  • CSS动画参数
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

/**
 * CSS动画常用参数
 */
{
     /* 不透明度 */
    opacity: 1;

    /* 放大缩小 */  
    transform: scale(1);

    /* 旋转 */
    transform: rotate(360deg);

    /* 平移(水平, 垂直) */
    transform: translate(-100%, 0);
}
根据CC BY-NC-SA 4.0协议授权
© 2024 - 2025 莱特雷-letere
使用 Hugo 构建
主题 Stack 由 Jimmy 设计