Butterfly主题顶部添加波浪效果

前言

博客文章顶部太过单调？本文教你如何为 Butterfly 主题的每篇文章顶部添加一个动态波浪分隔效果，让页面过渡更自然、更有层次感。

波浪效果预览

实现步骤

第一步：修改布局文件

打开主题目录下的布局文件：

1
/themes/butterfly/layout/includes/header/index.pug

找到以下代码段：

1
2
3
header#page-header(class=`${headerClassName + isFixedClass}` style=bg_img)
  include ./nav.pug
  if top_img !== false

在 if top_img !== false 后面添加波浪 SVG 结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
header#page-header(class=`${headerClassName + isFixedClass}` style=bg_img)
  include ./nav.pug
  if top_img !== false
    section.main-hero-waves-area.waves-area
      svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')
        defs
          path#gentle-wave(d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z')
        g.parallax
          use(href='#gentle-wave', x='48', y='0')
          use(href='#gentle-wave', x='48', y='3')
          use(href='#gentle-wave', x='48', y='5')
          use(href='#gentle-wave', x='48', y='7')
    if globalPageType === 'post'
      include ./post-info.pug

第二步：创建波浪样式文件

在 /source/css/ 目录下创建 wave.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
/* 波浪动画关键帧 */
@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/* 四层波浪分别设置不同的动画时长和透明度，形成层次感 */
.parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: #ffffffbd;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #ffffff82;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #ffffff36;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #ffffff;
}

/* 暗色模式适配 */
[data-theme="dark"] .parallax > use:nth-child(1) {
  fill: #18171dc8;
}
[data-theme="dark"] .parallax > use:nth-child(2) {
  fill: #18171d80;
}
[data-theme="dark"] .parallax > use:nth-child(3) {
  fill: #18171d3e;
}
[data-theme="dark"] .parallax > use:nth-child(4) {
  fill: #0d0d10;
}

/* 波浪容器 */
.waves-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  height: 40px;
  min-height: 40px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .waves-svg {
    height: 40px;
    min-height: 40px;
  }
}

第三步：引入样式文件

编辑 _config.butterfly.yml，在 inject.head 中引入刚创建的 CSS：

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/wave.css">     # 顶部波浪效果

参数自定义

参数 说明 建议值
animation-duration 波浪移动速度（越小越快） 7s ~ 20s
fill 波浪颜色（可配主题色） #ffffff 系或品牌色
height 波浪高度 40px（移动端可减小）

注意事项

  1. 四层波浪的动画时长不要相同，否则会失去层次感
  2. 颜色建议使用半透明色，叠加后更好看
  3. 如果顶部图片颜色较深，波浪颜色也需要相应调整