点击查看效果

魔改

  1. 修改 themes/butterfly/layout/includes/header/index.pug 大概第 33 行左右
    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属性可以控制波浪颜色,最好使其中一个颜色与背景颜色一致,否则会显的有点奇怪。