2023的第一篇水文，果然过年还是有点氛围仪式感更有意思，就是麻烦了点。换主题配色的时候才发现以前堆的屎山是真的臭，改个色痛苦要死，当时是只管能跑起来，什么样式和代码都没优化，跑起来后又懒得去调整。

新年氛围我网站一共就用了三个效果，一个是导航顶部的摆动灯笼，一个是下雪，再有一个就是烟花动画。

摆动的灯笼

创建灯笼dom

在themes\butterfly\layout\includes\header下新建lantern.pug

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
#lantern
  //- 灯笼1
  .deng-box
    .deng
      .xian
      .deng-a
        .deng-b
          .deng-t 新
      .shui.shui-a
        .shui-c
        .shui-b
  //- 灯笼2 
  .deng-box1
    .deng
      .xian
      .deng-a
        .deng-b
          .deng-t 年
      .shui.shui-a
        .shui-c
        .shui-b
  //- 灯笼3
  .deng-box2
    .deng
      .xian
      .deng-a
        .deng-b
          .deng-t 康
      .shui.shui-a
        .shui-c
        .shui-b
  //- 灯笼4
  .deng-box3
    .deng
      .xian
      .deng-a
        .deng-b
          .deng-t 健
      .shui.shui-a
        .shui-c
        .shui-b

引入到页面

在themes\butterfly\layout\includes\header\index.pug中引入新建的lantern.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
header#page-header(class=isHomeClass style=bg_img)
  include ./nav.pug

  //- 添加节日氛围灯笼
+ include ./lantern.pug

  if is_post()
    #coverdiv.coverdiv.loaded
      img#post-cover(src=url_for(top_img) alt='cover' oncontextmenu="return false;" ondragstart="return false;")

  if top_img !== false
    if is_post()
      include ./post-info.pug

CSS样式

在source\css下新建newYear.css，也可以放到已经引入的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
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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
[data-theme=light] {
  --lantern-red: rgba(171, 17, 28, 0.8);
  --lantern-yellow: linear-gradient(to right, #dc8f03, #ffc069, #dc8f03, #ffc069, #dc8f03);
  --lantern-fontcolor: #e7ac5c;
  --lantern-box: -5px 5px 50px 4px rgb(250 108 0);
}
[data-theme=dark] {
  --lantern-red: rgba(157, 26, 26, 0.8);
  --lantern-yellow: linear-gradient(to right, #b1770e, #e3a653, #b1770e, #e3a653, #b1770e);
  --lantern-fontcolor: #d59339;
  --lantern-box: -5px 5px 30px 4px rgb(197 114 51);
}

/* 节日灯笼 */
@media screen and (max-width: 768px) {
  #lantern {
    display: none;
  }
}
.deng-box {
  position: fixed;
  top: -40px;
  left: -20px;
  z-index: 999;
  transition: .3s;
}
.deng-box1 {
  position: fixed;
  top: -30px;
  left: 10px;
  z-index: 999;
  transition: .3s;
}
.deng-box2 {
  position: fixed;
  top: -40px;
  right: -20px;
  z-index: 999;
  transition: .3s;
}
.deng-box3 {
  position: fixed;
  top: -30px;
  right: 10px;
  z-index: 999;
  transition: .3s;
}

#page-header.nav-fixed .deng-box {
  position: fixed;
  top: 15px;
  left: -20px;
  z-index: 999;
  transition: .3s;
}
#page-header.nav-fixed .deng-box1 {
  position: fixed;
  top: 25px;
  left: 10px;
  z-index: 999;
  transition: .3s;
}
#page-header.nav-fixed .deng-box2 {
  position: fixed;
  top: 15px;
  right: -20px;
  z-index: 999;
  transition: .3s;
}
#page-header.nav-fixed .deng-box3 {
  position: fixed;
  top: 25px;
  right: 10px;
  z-index: 999;
  transition: .3s;
}

.deng-box1 .deng {
  position: relative;
  width: 120px;
  height: 90px;
  margin: 50px;
  background: #d8000f;
  background: var(--lantern-red);
  border-radius: 50% 50%;
  -webkit-transform-origin: 50% -100px;
  -webkit-animation: swing 5s infinite ease-in-out;
  box-shadow: var(--lantern-box);
}
.deng-box2 .deng {
  position: relative;
  width: 120px;
  height: 90px;
  margin: 50px;
  background: #d8000f;
  background: var(--lantern-red);
  border-radius: 50% 50%;
  -webkit-transform-origin: 50% -100px;
  -webkit-animation: swing 5s infinite ease-in-out;
  box-shadow: var(--lantern-box);
}
.deng-box3 .deng {
  position: relative;
  width: 120px;
  height: 90px;
  margin: 50px;
  background: #d8000f;
  background: var(--lantern-red);
  border-radius: 50% 50%;
  -webkit-transform-origin: 50% -100px;
  -webkit-animation: swing 3s infinite ease-in-out;
  box-shadow: var(--lantern-box);
}
.deng {
  position: relative;
  width: 120px;
  height: 90px;
  margin: 50px;
  background: #d8000f;
  background: var(--lantern-red);
  border-radius: 50% 50%;
  -webkit-transform-origin: 50% -100px;
  -webkit-animation: swing 3s infinite ease-in-out;
  box-shadow: var(--lantern-box);
}

.deng-a {
  width: 100px;
  height: 90px;
  background: #d8000f;
  background: rgba(216, 0, 15, 0.1);
  margin: 12px 8px 8px 8px;
  border-radius: 50% 50%;
  border: 2px solid #dc8f03;
}

.deng-b {
  width: 45px;
  height: 90px;
  background: #d8000f;
  background: rgba(216, 0, 15, 0.1);
  margin: -4px 8px 8px 26px;
  border-radius: 50% 50%;
  border: 2px solid #dc8f03;
}

.xian {
  position: absolute;
  top: -20px;
  left: 60px;
  width: 2px;
  height: 20px;
  background: #dc8f03;
}

.shui-a {
  position: relative;
  width: 5px;
  height: 20px;
  margin: -5px 0 0 59px;
  -webkit-animation: swing 4s infinite ease-in-out;
  -webkit-transform-origin: 50% -45px;
  background: #ffa500;
  border-radius: 0 0 5px 5px;
}

.shui-b {
  position: absolute;
  top: 14px;
  left: -2px;
  width: 10px;
  height: 10px;
  background: #dc8f03;
  border-radius: 50%;
}

.shui-c {
  position: absolute;
  top: 18px;
  left: -2px;
  width: 10px;
  height: 35px;
  background: #ffa500;
  border-radius: 0 0 0 5px;
}

.deng:before {
  position: absolute;
  top: -7px;
  left: 29px;
  height: 12px;
  width: 60px;
  content: " ";
  display: block;
  z-index: 999;
  border-radius: 5px 5px 0 0;
  border: solid 1px #dc8f03;
  background: #ffa500;
  background: var(--lantern-yellow);
}

.deng:after {
  position: absolute;
  bottom: -7px;
  left: 10px;
  height: 12px;
  width: 60px;
  content: " ";
  display: block;
  margin-left: 20px;
  border-radius: 0 0 5px 5px;
  border: solid 1px #dc8f03;
  background: #ffa500;
  background: var(--lantern-yellow);
}

.deng-t {
  font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
  font-size: 3.2rem;
  color: var(--lantern-fontcolor);
  font-weight: bold;
  line-height: 85px;
  text-align: center;
}

.night .deng-t, 
.night .deng-box, 
.night .deng-box1 {
  background: transparent !important;
}

@-moz-keyframes swing {
  0% {
      -moz-transform: rotate(-10deg)
  }

  50% {
      -moz-transform: rotate(10deg)
  }

  100% {
      -moz-transform: rotate(-10deg)
  }
}

@-webkit-keyframes swing {
  0% {
      -webkit-transform: rotate(-10deg)
  }

  50% {
      -webkit-transform: rotate(10deg)
  }

  100% {
      -webkit-transform: rotate(-10deg)
  }
}

下雪动画

添加dom

在themes\butterfly\layout\includes\header\index.pug中添加结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
header#page-header(class=isHomeClass style=bg_img)
  include ./nav.pug

  //- 添加节日氛围灯笼
  include ./lantern.pug
  //- 添加下雪动画
+  #snowflake
+    - for (var a = 0; a < 199; a++)
+      .snow

  if is_post()
    #coverdiv.coverdiv.loaded
      img#post-cover(src=url_for(top_img) alt='cover' oncontextmenu="return false;" ondragstart="return false;")

  if top_img !== false
    if is_post()
      include ./post-info.pug

CSS样式

因为样式内容太长，所以把样式文件单独上传百度网盘里了，下载后放到source\css文件夹里，然后主题配置_config.butterfly.yml引入样式文件

点击下载 提取码：rjq1

1
2
3
inject:
  head:
  	- <link rel="stylesheet" href="/css/snow.css">

烟花动画

添加dom

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
header#page-header(class=isHomeClass style=bg_img)
  include ./nav.pug

  //- 添加节日氛围灯笼
  include ./lantern.pug
  //- 添加下雪动画
  #snowflake
    - for (var a = 0; a < 199; a++)
      .snow
  //- 添加烟花动画
+  #canvas
+    - var num = 20;
+    - for (var i = 0; i < num; i++) {
+      div(class="pattern"+i+" fireworks fire"+i) 
+        .ring_1
+        .ring_2
+    - }

  if is_post()
    #coverdiv.coverdiv.loaded
      img#post-cover(src=url_for(top_img) alt='cover' oncontextmenu="return false;" ondragstart="return false;")

  if top_img !== false
    if is_post()
      include ./post-info.pug

CSS样式

因为样式内容太长，所以把样式文件单独上传百度网盘里了，下载后放到source\css文件夹里，然后主题配置_config.butterfly.yml引入样式文件

点击下载 提取码：7mi8

1
2
3
inject:
  head:
  	- <link rel="stylesheet" href="/css/fireworks.css">