引入这个动画是因为加载自定义字体后，因为字体太大导致网站总是先显示默认字体，过一会再显示自定义字体，
强迫症犯了。所以希望等加载后再展示网站
牛顿摆动画
- 将以下代码复制进
layouts/partials/head/custom.html(文件不存在则自行创建)
1<div class="loading">
2 <!-- html内容 -->
3 <div class="newtons-cradle">
4 <div class="newtons-cradle__dot"></div>
5 <div class="newtons-cradle__dot"></div>
6 <div class="newtons-cradle__dot"></div>
7 <div class="newtons-cradle__dot"></div>
8 </div>
9</div>
10
11<style>
12 .loading {
13 position: fixed;
14 display: flex;
15 justify-content: center;
16 align-items: center;
17 top: 0;
18 left: 0;
19 width: 100%;
20 height: 100%;
21 z-index: 99;
22 background-color: #f5f5fa;
23 }
24
25 /* css内容 */
26
27 /* From Uiverse.io by dovatgabriel */
28 .newtons-cradle {
29 --uib-size: 50px;
30 --uib-speed: 1.2s;
31 --uib-color: #474554;
32 position: relative;
33 display: flex;
34 align-items: center;
35 justify-content: center;
36 width: var(--uib-size);
37 height: var(--uib-size);
38 }
39
40 .newtons-cradle__dot {
41 position: relative;
42 display: flex;
43 align-items: center;
44 height: 100%;
45 width: 25%;
46 transform-origin: center top;
47 }
48
49 .newtons-cradle__dot::after {
50 content: '';
51 display: block;
52 width: 100%;
53 height: 25%;
54 border-radius: 50%;
55 background-color: var(--uib-color);
56 }
57
58 .newtons-cradle__dot:first-child {
59 animation: swing var(--uib-speed) linear infinite;
60 }
61
62 .newtons-cradle__dot:last-child {
63 animation: swing2 var(--uib-speed) linear infinite;
64 }
65
66 @keyframes swing {
67 0% {
68 transform: rotate(0deg);
69 animation-timing-function: ease-out;
70 }
71
72 25% {
73 transform: rotate(70deg);
74 animation-timing-function: ease-in;
75 }
76
77 50% {
78 transform: rotate(0deg);
79 animation-timing-function: linear;
80 }
81 }
82
83 @keyframes swing2 {
84 0% {
85 transform: rotate(0deg);
86 animation-timing-function: linear;
87 }
88
89 50% {
90 transform: rotate(0deg);
91 animation-timing-function: ease-out;
92 }
93
94 75% {
95 transform: rotate(-70deg);
96 animation-timing-function: ease-in;
97 }
98 }
99
100 .animated-stop {
101 animation-play-state: paused !important;
102 }
103
104 .scaleAndFadeout {
105 animation: scaleAndFadeOut 1.5s forwards;
106 }
107
108 /** 放大1.5倍，并渐变到透明 */
109 @keyframes scaleAndFadeOut {
110 0% {
111 transform: scale(1);
112 opacity: 1;
113 }
114 100% {
115 transform: scale(1.5);
116 opacity: 0;
117 }
118 }
119
120</style>
121
122<script>
123 // 首次加载：等资源完 → 播放动画 → 淡出
124 window.addEventListener('load', () => {
125 const loading = document.querySelector('.loading');
126 if (!loading) return;
127
128 setTimeout(() => loading.classList.add('scaleAndFadeout'), 600);
129 setTimeout(() => loading.style.display = 'none', 2000);
130 });
131
132 // PJAX 切换：直接隐藏
133 document.addEventListener('pjax:complete', () => {
134 const loading = document.querySelector('.loading');
135 if (loading) loading.style.display = 'none';
136 });
137</script>
这边设置的是第一次进入界面和手动刷新时会加载动画
自定义动画
- 前往UIverse，找一个加载动画
- 将加载动画的html，css分别根据下面的模板填写，然后将内容复制到
layouts/partials/head/custom.html
1<div class="loading">
2 <!-- html内容 -->
3</div>
4
5<style>
6 .loading {
7 position: fixed;
8 display: flex;
9 justify-content: center;
10 align-items: center;
11 top: 0;
12 left: 0;
13 width: 100%;
14 height: 100%;
15 z-index: 99;
16 background-color: #f5f5fa;
17 }
18
19 .animated-stop {
20 animation-play-state: paused !important;
21 }
22
23 .scaleAndFadeout {
24 animation: scaleAndFadeOut 1.5s forwards;
25 }
26
27 /** 放大1.5倍，并渐变到透明 */
28 @keyframes scaleAndFadeOut {
29 0% {
30 transform: scale(1);
31 opacity: 1;
32 }
33 100% {
34 transform: scale(1.5);
35 opacity: 0;
36 }
37 }
38
39 /* css内容 */
40</style>
41
42<script>
43 // 首次加载：等资源完 → 播放动画 → 淡出
44 window.addEventListener('load', () => {
45 const loading = document.querySelector('.loading');
46 if (!loading) return;
47
48 setTimeout(() => loading.classList.add('scaleAndFadeout'), 600);
49 setTimeout(() => loading.style.display = 'none', 2000);
50 });
51
52 // PJAX 切换：直接隐藏
53 document.addEventListener('pjax:complete', () => {
54 const loading = document.querySelector('.loading');
55 if (loading) loading.style.display = 'none';
56 });
57</script>
- 具体的细节可以根据需求更改
样式
- CSS可能用到样式
1/**
2 * 可能会用到的CSS
3 */
4{
5 /* 整体修改元素大小(大于1放大, 小于1缩小) */
6 zoom: 1.0;
7
8 /* 开始动画播放 */
9 animation-play-state: running;
10
11 /* 暂停动画播放 */
12 animation-play-state: paused;
13
14 /* 元素居中(flex布局) */
15 display: flex;
16 justify-content: center;
17 align-items: center;
18
19 /* 元素隐藏 */
20 display: none;
21
22 /* 定义动画 */
23 @keyframes 动画名 {
24 0% {}
25 进度% {}
26 100% {}
27 }
28
29 /* 执行动画 */
30 animation: 动画名 时间;
31}
- CSS动画常用参数
1/**
2 * CSS动画常用参数
3 */
4{
5 /* 不透明度 */
6 opacity: 1;
7
8 /* 放大缩小 */
9 transform: scale(1);
10
11 /* 旋转 */
12 transform: rotate(360deg);
13
14 /* 平移(水平, 垂直) */
15 transform: translate(-100%, 0);
16}