博客魔改教程:为博客添加波浪效果

效果预览

预览

魔改步骤

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

    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. 为了方便复制,提供一份需要修改的部分:

    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 文件

    .main-hero-waves-area {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -11px;
    z-index: 5;
    }
    .waves-area .waves-svg {
    width: 100%;
    height: 5rem;
    }
    .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);
    }
    }
    @media (max-width: 768px) {
    .waves-area .waves-svg {
    height: 40px;
    min-height: 40px;
    }
    }

总结

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

消息盒子
# 您需要首次评论以获取消息 #
# 您需要首次评论以获取消息 #

只显示最新10条未读和已读信息