博客添加波浪效果

修改 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

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

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')

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

/* 波浪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属性可以控制波浪颜色，最好使其中一个颜色与背景颜色一致，否则会显的有点奇怪

博客添加波浪效果

总结

发表评论