为博客添加波浪效果

效果预览

魔改步骤

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

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

原文地址

感谢您的来访，获取更多精彩文章请收藏本站。