Hexo Butterfly 文章页顶部添加波浪效果!
波浪效果
添加 SVG
文件路径:{HexoRoot}themes/butterfly/layout/includes/header/index.pug

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')
|
添加 CSS
css 文件路径:{HexoRoot}/source/css/wave.css
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
| .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; } }
|