介绍

这是一款子比底部彩虹流光动态文字漂浮页面美化，这套底部样式有着高级渐变色底，并且还是适配的电脑端和手机端的，简单的测试了一下这个页脚样式还是不错的，喜欢的自行部署吧！

代码

将原代码替换

<footer class=”footer”>
  <?php if (function_exists(‘dynamic_sidebar’)) {
    dynamic_sidebar(‘all_footer’);
}?>
  <div class=”container-fluid container-footer”>
    <?php do_action(‘zib_footer_conter’);?>
  </div>
</footer>

替换后

<footer class="api-footer">
  <div class="text-background"></div>
  <div class="footer-content">
    <div class="site-info">
      <h2>YC博客</h2>
      <p>坚持搜集和分享各种网络知识</p>
    </div>
    
    <div class="api-buttons">
      <a href="https://docs.github.com/" target="_blank" rel="noopener noreferrer" 
         class="glow-btn" style="--btn-color: #4facfe; --btn-light: rgba(79, 172, 254, 0.3);">
         API文档
      </a>

      <a href="https://postman.com/" target="_blank" rel="noopener noreferrer" 
         class="glow-btn" style="--btn-color: #00f2fe; --btn-light: rgba(0, 242, 254, 0.3);">
         接口测试
      </a>

      <a href="https://developer.mozilla.org/" target="_blank" rel="noopener noreferrer" 
         class="glow-btn" style="--btn-color: #7a04eb; --btn-light: rgba(122, 4, 235, 0.3);">
         开发者中心
      </a>

      <a href="https://stripe.com/pricing" target="_blank" rel="noopener noreferrer" 
         class="glow-btn" style="--btn-color: #f9004d; --btn-light: rgba(249, 0, 77, 0.3);">
         价格方案
      </a>

      <a href="https://openai.com/contact" target="_blank" rel="noopener noreferrer" 
         class="glow-btn" style="--btn-color: #fee140; --btn-light: rgba(254, 225, 64, 0.3);">
         联系我们
      </a>

      <a href="https://about.google/" target="_blank" rel="noopener noreferrer" 
         class="glow-btn" style="--btn-color: #34c759; --btn-light: rgba(52, 199, 89, 0.3);">
         关于我们
      </a>
    </div>
    
    <div class="copyright">
      <p>© 2025 YC博客 版权所有 | 专注于子比主题美化</p>
    </div>
  </div>
</footer>

<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}
.api-footer{position:relative;width:100%;padding:6rem 3rem 4rem;overflow:hidden;background:linear-gradient(135deg,#0f0c29 0%,#302b63 50%,#24243e 100%);color:#fff}
.text-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;opacity:0.1;overflow:hidden}
.floating-text{position:absolute;color:rgba(255,255,255,0.7);font-weight:bold;pointer-events:none;animation:floatRotate 8s infinite ease-in-out}
@keyframes floatRotate{0%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-30px) rotate(15deg)}50%{transform:translateY(0) rotate(0deg)}75%{transform:translateY(30px) rotate(-15deg)}100%{transform:translateY(0) rotate(0deg)}}
.footer-content{position:relative;z-index:2;max-width:1400px;margin:0 auto;text-align:center}
.site-info{margin-bottom:3rem}
.site-info h2{font-size:3rem;margin-bottom:0.8rem;text-shadow:0 0 15px rgba(255,255,255,0.5)}
.site-info p{font-size:1.3rem;opacity:0.8}
.api-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-bottom:3rem}
.api-buttons a.glow-btn{display:inline-block;text-decoration:none;text-align:center;position:relative;overflow:hidden}
.glow-btn{padding:1.2rem 2.2rem;border:2px solid var(--btn-color);border-radius:15px;font-size:1.2rem;font-weight:600;color:white;background-color:var(--btn-light);backdrop-filter:blur(3px);cursor:pointer;transition:transform 0.3s ease,box-shadow 0.3s ease,background-color 0.3s ease;box-shadow:0 0 15px var(--btn-color)}
.glow-btn{text-shadow:0 0 5px rgba(0,0,0,0.3)}
.glow-btn::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient( to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0) 100% );transform:rotate(30deg);animation:shine 3s infinite}
@keyframes shine{0%{transform:translateX(-100%) rotate(30deg)}100%{transform:translateX(100%) rotate(30deg)}}
.glow-btn:hover{transform:translateY(-10px);box-shadow:0 15px 30px rgba(0,0,0,0.3),0 0 20px var(--btn-color);background-color:rgba(255,255,255,0.4);border-color:rgba(255,255,255,0.7)}
/* 水波纹效果 */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  background-color: rgba(255,255,255,0.6);
  pointer-events: none;
}
@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
.copyright{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.1);font-size:1.1rem;opacity:0.7}
@media (max-width:768px){
  .api-footer{padding:4rem 1.5rem 2.5rem}
  .site-info h2{font-size:2.2rem}
  .site-info p{font-size:1.1rem}
  .glow-btn{padding:1rem 1.8rem;font-size:1rem;border-radius:12px}
  .copyright p{font-size:0.9rem}
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const textContainer = document.querySelector('.text-background');
  const text = 'YC博客';
  const count = 60;
  
  for (let i = 0; i < count; i++) {
    const textElement = document.createElement('div');
    textElement.className = 'floating-text';
    textElement.textContent = text;
    
    const left = Math.random() * 100;
    const top = Math.random() * 100;
    const size = 18 + Math.random() * 30;
    const delay = Math.random() * 5;
    const opacity = 0.2 + Math.random() * 0.5;
    
    textElement.style.left = `${left}%`;
    textElement.style.top = `${top}%`;
    textElement.style.fontSize = `${size}px`;
    textElement.style.animationDelay = `${delay}s`;
    textElement.style.opacity = opacity;
    
    textContainer.appendChild(textElement);
  }

  const footer = document.querySelector('.api-footer');
  let angle = 0;
  setInterval(() => {
    angle = (angle + 0.1) % 360;
    footer.style.background = `linear-gradient(${angle}deg, #0f0c29 0%, #302b63 50%, #24243e 100%)`;
  }, 5000);

  // 水波纹点击效果
  document.querySelectorAll('.glow-btn').forEach(btn => {
    btn.addEventListener('click', function(e) {
      const ripple = document.createElement('span');
      ripple.classList.add('ripple');
      const rect = this.getBoundingClientRect();
      ripple.style.width = ripple.style.height = Math.max(rect.width, rect.height) + 'px';
      ripple.style.left = e.clientX - rect.left - rect.width/2 + 'px';
      ripple.style.top = e.clientY - rect.top - rect.height/2 + 'px';
      this.appendChild(ripple);
      setTimeout(() => ripple.remove(), 600);
    });
  });
});
</script>