B2主题美化技巧：首页全屏动态波浪banner页

看到有人私信我，想知道xdaza首页的蓝色波浪banner页面怎么设置的，今天就和大家分享一下

前言

本教程来自npc.ink，感谢npc站长的辛勤付出

炫酷波动背景图

这次分享一款全屏波动背景图，适合放在首页，非常吸睛，大气。底部的波纹会及时波动。总而言之，这是一款非常大气的wordpress美化教程，希望大家看好啦。

教程

直接在xdaza首页，开启浏览器控制台，复制waves-inner内的代码即可。如果不会，可以在下方获取具体的代码

[content_hide]

<!--复制开始-->
<!--
版本：1.0
整理：Muze
原文：https://xdaza.com
-->
<div class="waves-box"><div class="waves-inner">
<h2>从获取流量到变现指导
</h2>
<p>保持好奇，探索不止</p>
<a href="https://xdaza.com/money" target="_blank">XDAZA.COM</a>
</div><div><svg class="waves" 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 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path></defs><g class="parallax"><use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7"></use><use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"></use><use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)"></use><use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"></use></g></svg></div>
</div>

<h1 style="text-align: center;"></h1>

<style type="text/css">
/**/
.home_row {margin-top: -16px;}
.home_row_0 {margin-top: -32px;}
.home_row_0 .wrapper,.home_row_0 .wrapper .box {width: 100%!important;box-shadow: none;}
.box{box-shadow: none;}
/**/
.waves-box {position:relative;text-align:center;background:linear-gradient(60deg,#05f 0%,#0bf 100%);color:white;}
.waves-inner {height:360px;width:100%;margin:0;padding-top:115px;}
.waves-inner h2{font-size: 2em;font-weight: bold;letter-spacing: 2px;}
.waves-inner p{padding: 10px;margin-bottom: 30px;}
.waves-inner a{padding: 10px 28px;font-size: 1.2em;background: #fff;color: #09f;font-weight: bold;border-radius: 50px;}
.waves-inner a:hover{box-shadow: 0 5px 10px #05f;}
.waves {position:relative;width:100%;height:15vh;margin-bottom:-7px;min-height:100px;max-height:150px;}
.parallax > use {animation:move-forever 25s cubic-bezier(.55,.5,.45,.5)infinite;}
.parallax > use:nth-child(1) {animation-delay:-2s;animation-duration:7s;}
.parallax > use:nth-child(2) {animation-delay:-3s;animation-duration:10s;}
.parallax > use:nth-child(3) {animation-delay:-4s;animation-duration:13s;}
.parallax > use:nth-child(4) {animation-delay:-5s;animation-duration:20s;}
@keyframes move-forever {0% {transform:translate3d(-90px,0,0);}
100% {transform:translate3d(85px,0,0);}
}
@media (max-width:768px) {
.waves {height:40px;min-height:40px;}
.waves-inner {padding-top:50px;}
.mg-b {margin-bottom: 0;}
.home_row{padding: 0px!important;}
}
/*
*根据自己的需求删除
*/
.waves-inner a{/*去除下划线*/
text-decoration: none;
}
/*
*美化边框
*/
body{
padding: 0px;
margin: 0px;
}

/*
*B2主题全屏适配，数字为模块位置n-1，以下代码为放在第一个模块的情况
*/
.home_row_0 .wrapper, .home_row_0 .wrapper .box {
width: 100%!important;
box-shadow: none;
}

</style>

<!--复制到此为止-->

[/content_hide]

[b2_insert_post id="1344"]