由于博主仅粗略地学习了一点点CSS,下面的操作可能仅适合和博主一样的小白,若有不规范的操作或者不正确的解释望大家谅解~
写在前面
在浏览各路大神的博客时,偶然看到这个特效,于是就想在我的网站上也弄一个,好了不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;
}
效果图

优格柚の站长 2020-12-11 17:37