引用站外地址，不保证站点的可用性和安全性
butterfly文章顶部添加波浪效果
安知鱼
效果预览

预览

魔改步骤

  1. 修改 themes/butterfly/layout/includes/header/index.pug 大概第 38 行左右

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    if top_img !== false
      if is_post()
        include ./post-info.pug
    +   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')
        #post-top-cover
          img#post-top-bg(class='nolazyload' src=bg_img)
      else if is_home()
        #site-info
          h1#site-title=site_title
          if theme.subtitle.enable

  2. 为了方便复制，提供一份需要修改的部分:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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')

  3. 然后在_config.butterfly.yml的 [inject.head] 或者自定义 css 中 引入以下 css, 不会的同学参考Hexo博客添加自定义 css 和 js 文件

    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
    /* 波浪css */
    .main-hero-waves-area {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: -11px;
      z-index: 5;
    }
    .waves-area .waves-svg {
      width: 100%;
      height: 5rem;
    }
    /* Animation */

    .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: #f7f9febd;
    }
    .parallax > use:nth-child(2) {
      animation-delay: -3s;
      animation-duration: 10s;
      fill: #f7f9fe82;
    }
    .parallax > use:nth-child(3) {
      animation-delay: -4s;
      animation-duration: 13s;
      fill: #f7f9fe36;
    }
    .parallax > use:nth-child(4) {
      animation-delay: -5s;
      animation-duration: 20s;
      fill: #f7f9fe;
    }
    /* 黑色模式背景 */
    [data-theme="dark"] .parallax > use:nth-child(1) {
      animation-delay: -2s;
      animation-duration: 7s;
      fill: #18171dc8;
    }
    [data-theme="dark"] .parallax > use:nth-child(2) {
      animation-delay: -3s;
      animation-duration: 10s;
      fill: #18171d80;
    }
    [data-theme="dark"] .parallax > use:nth-child(3) {
      animation-delay: -4s;
      animation-duration: 13s;
      fill: #18171d3e;
    }
    [data-theme="dark"] .parallax > use:nth-child(4) {
      animation-delay: -5s;
      animation-duration: 20s;
      fill: #18171d;
    }

    @keyframes move-forever {
      0% {
        transform: translate3d(-90px, 0, 0);
      }
      100% {
        transform: translate3d(85px, 0, 0);
      }
    }
    /*Shrinking for mobile*/
    @media (max-width: 768px) {
      .waves-area .waves-svg {
        height: 40px;
        min-height: 40px;
      }
    }

总结

大功告成，需要注意的是 css 中fill属性可以控制波浪颜色，最好使其中一个颜色与背景颜色一致，否则会显的有点奇怪