加一个炫酷的首页波纹动态背景卡片_wordpress博客

对于很多想要美化自己的wordpress博客的爱好者来说，这款波纹动态卡片是一个很好的选择，使你的网站变得高端大气，图片中原本是单按钮的，小编带来的是双按钮模式，图片中底部的波纹状是动态的，和水面波纹一样。

因为我是用的B2主题所有添加这个模块代码十分简单，只需要在后台主题设置中的模块设置，选择首页，添加一个新模块调用内容是广告位，然后将下面的代码替换默认代码即可；

<!--复制开始-->
<div class="waves-box"><div class="waves-inner">
	<h2>零零猴资源库提供优秀且一流的WordPress、Typecho主题及插件下载服务
	</h2>
	<p>零零猴资源库收录国内外优秀WordPress、Typecho插件主题，无需代码知识即可快速搭建网站，并提供免费咨询服务！</p>
	<a href="https://l0h.cn/" target="_blank">挑选WordPress主题</a>
	<a href="https://l0h.cn/" target="_blank">挑选Typecho主题</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>
	

<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;
	margin: 0 1em;
}
/*
 *美化边框
 */
 body{
	 padding: 0px;
	 margin: 0px;
 }

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

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

这边有一个注意的地方：这个代码单独拿出来是因为它控制着卡片显示的大小，讲一下它是如何使用的，B2主题为例，代码中有个“数字为模块位置n-1”的注释，这个是上面说的新建的模块，如果你放在所有模块的第二个位置，那么下面代码中“有个数字0”就是你模块位置减去1得到的数字。

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

其他的主题只需要加在自己想要的位置即可，但不保证能够适应你的主题。使用前，请备份，备份，备份！