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

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

摆动的灯笼

创建灯笼dom

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

#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

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文件里，氛围样式更好统一管理。

[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中添加结构

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

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

烟花动画

添加dom

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

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