写在前面

在浏览各路大神的博客时，偶然看到这个特效，于是就想在我的网站上也弄一个，好了不bbll了下面请看操作过程~

操作过程

1.在网站根目录下找到header.php

大部分主题的header.php的路径/usr/themes/你使用的主题名/header.php
比如我的Typecho主题是Miracles，则header.php的路径：/usr/themes/Miracles/includes/header.php，如果这些路径都找不到，就多点开几个主题下的目录找一找就能找到了，或者使用搜索功能查找。

2.在header.php中增加代码

打开header.php，找到加载背景图的位置，在下方插入代码

<!-- 波浪 -->
 <section class="main-hero-waves-area waves-area">
        <svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
            <defs>
                <path id="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"></path>
            </defs>
            <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="0"></use>
                <use xlink:href="#gentle-wave" x="48" y="3"></use>
                <use xlink:href="#gentle-wave" x="48" y="5"></use>
                <use xlink:href="#gentle-wave" x="48" y="7"></use>
            </g>
        </svg>
    </section>

一般主题会有注释，很容易就能找到加载背景图的代码，如果没有注释，打开网站，右键网站背景图，点击“检查”，就能找到对应的代码，例如：

3.在后台自定义CSS中添加以下代码

#header {
    position: relative;
    text-align: center;
    /*background: #000000 no-repeat fixed center center;*/
    background-size: cover;
    margin-bottom: 2rem;
    object-fit: cover;
    background-position-x: center;
    background-position-y: center;
    /*background-attachment:fixed*/
}
.hero-box{
    position: relative;
    height: 25rem;
}
#header:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=);
}
.main-hero-waves-area {
    width: 100%;
    position: absolute;
    left: 0;
    z-index: 0;
}

.main-hero-waves-area {
    bottom: 250px;
}

.waves-area .waves-svg {
    width: 100%;
    height: 6rem
}

.waves-area .parallax>use {
    -webkit-animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite
}

.waves-area .parallax>use:first-child {
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    fill: hsla(0, 0%, 100%, .7)
}

.waves-area .parallax>use:nth-child(2) {
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    fill: hsla(0, 0%, 100%, .5)
}

.waves-area .parallax>use:nth-child(3) {
    -webkit-animation-delay: -4s;
    animation-delay: -4s;
    -webkit-animation-duration: 13s;
    animation-duration: 13s;
    fill: hsla(0, 0%, 100%, .3)
}

.waves-area .parallax>use:nth-child(4) {
    -webkit-animation-delay: -5s;
    animation-delay: -5s;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    fill: hsla(0, 0%, 100%, .1)
}

@-webkit-keyframes move-forever {
    0% {
        -webkit-transform: translate3d(-90px, 0, 0);
        transform: translate3d(-90px, 0, 0)
    }
    to {
        -webkit-transform: translate3d(85px, 0, 0);
        transform: translate3d(85px, 0, 0)
    }
}

@keyframes move-forever {
    0% {
        -webkit-transform: translate3d(-90px, 0, 0);
        transform: translate3d(-90px, 0, 0)
    }
    to {
        -webkit-transform: translate3d(85px, 0, 0);
        transform: translate3d(85px, 0, 0)
    }
}

注意：要根据实际情况调整此处的bottom属性来调整海浪的上下位置。

.main-hero-waves-area {
    bottom: 250px;
}

效果图