子比主题 – 底部添加蓝色波浪（两款）

1497字 8分钟 2025-12-21 诺守博客 42 0 该作者已发布430篇文章

文章最后更新时间：2025-12-21 21:13:58

这个是在论坛看到的，确实很不错，跟我以前的白色页脚差不多，这个是拿的白色滚动的样式来用的子比默认的底部，相当于给子比默认的页脚加了一个白色波浪，这个想法也确实不错，喜欢自行下载，如果喜欢本站的页脚，可以找我以前的文章去部署，本篇的页脚适配了PC和手机端，喜欢的自己部署一下

第一款

代码部署

此处内容已隐藏，请评论后刷新页面查看.

第二款

代码部署

进入宝塔面板，进入子比主题文件夹（zibll）找到footer.php文件，在footer标签(</footer>)下面添加下面代码。

<!--底部波浪开始-->
<div class="wiiuii_layout">
<svg class="editorial"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28"
     preserveAspectRatio="none">
 <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" />
  </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>
</div>
<style type='text/CSS'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--底部波浪结束-->