子比主题 – 页脚流光文字漂浮美化
这是一款子比底部彩虹流光动态文字漂浮页面美化，这套底部样式有着高级渐变色底，并且还是适配的电脑端和手机端的，腾飞博客简单的测试了一下这个页脚样式还是不错的，喜欢的自行部署吧！代码部署
首先我们要知道我们加这个底部之后，他官方的底部还存在，我们先把官方的代码删掉然后再按照下面的步骤来走，我们先定位：/wp-content/themes/zibll/footer.php，找到下面的代码，下面的代码是官方自带的底部，我们要给他删掉，避免后面出现两个底部
我们看到这个文件里面有一个如下的代码
<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>腾飞博客测试站</h2>
<p>本站致力于分享优质实用的互联网资源</p>
</div>
<div class="api-buttons">
<button class="glow-btn" style="--btn-color: #4facfe; --btn-light: rgba(79, 172, 254, 0.3);">API文档</button>
<button class="glow-btn" style="--btn-color: #00f2fe; --btn-light: rgba(0, 242, 254, 0.3);">接口测试</button>
<button class="glow-btn" style="--btn-color: #7a04eb; --btn-light: rgba(122, 4, 235, 0.3);">开发者中心</button>
<button class="glow-btn" style="--btn-color: #f9004d; --btn-light: rgba(249, 0, 77, 0.3);">价格方案</button>
<button class="glow-btn" style="--btn-color: #fee140; --btn-light: rgba(254, 225, 64, 0.3);">联系我们</button>
<button class="glow-btn" style="--btn-color: #34c759; --btn-light: rgba(52, 199, 89, 0.3);">关于我们</button>
</div>
<div class="copyright">
<p>© 2025 腾飞博客 版权所有 | 专注于子比主题美化</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}.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;position:relative;overflow:hidden;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)}.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 = '腾飞博客测试站';
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);
});
</script>代码里面有一行：const text = '腾飞博客测试站';，这个是文字漂浮，可以自定义自己的网站名字！！
页:
[1]