博客魔改教程:为博客添加波浪效果
效果预览
魔改步骤
-
修改 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 文件
.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属性可以控制波浪颜色,最好使其中一个颜色与背景颜色一致,否则会显的有点奇怪
空空如也!