🎅挂件馆🌟铭牌馆✨️靓标库🧚‍♂️名人堂🦄宝可梦🍎水果机🥊猜拳🏧黑市🏧银行💹抽奖
   🎁
👮曝光台📜淘帖🧩导读👛帮助💰️钱包💖关注切换到宽版
  • 首页Portal
  • 社区BBS
  • 圈子
  • 资源
  • 商城
  • 任务
  • 家园Space
  • 排行Ranklist
    • 拍卖
    热搜 周润发 梨花 黑金 子比主题 死亡笔记 克米主题 GitHub 美化教程
    立即注册
    返回列表 发布新帖
    查看: 228|回复: 0

    [代码技巧] 子比主题 – 页脚流光文字漂浮美化

    [复制链接]
    飞流
    连续签到LV.1
    起源之星
    任务·年会员
    累计签到LV.3
    +2
    00001 FLLTCN
    社区贡献
    344 214 23839
    等级头衔
    Icon组别 : 管理员
    Icon等级 :

    积分成就
       钻石 : 196 颗
       贡献 : 13665 点
       金币 : 4 枚
    Icon在线时间 : 1924 小时
    Icon注册时间 : 2024-11-22
    Icon最后登录 : 2026-7-23
    送礼物：3 个 收礼物：1 个
    00001 FLLTCN 实名认证 特邀大神 诚信商家 信誉担保 精华作者+ 官方团队 vip vip-year 发表于 2025-10-10 17:10:32 | 查看全部 |阅读模式 浙江金华

    交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

    您需要 登录 才可以下载或查看，没有账号？立即注册

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

    image.webp

    代码部署



    首先我们要知道我们加这个底部之后，他官方的底部还存在，我们先把官方的代码删掉然后再按照下面的步骤来走，我们先定位：/wp-content/themes/zibll/footer.php，找到下面的代码，下面的代码是官方自带的底部，我们要给他删掉，避免后面出现两个底部
    我们看到这个文件里面有一个如下的代码

    1. <footer class=”footer”>
    2.   <?php if (function_exists(‘dynamic_sidebar’)) {
    3.     dynamic_sidebar(‘all_footer’);
    4. }?>
    5.   <div class=”container-fluid container-footer”>
    6.     <?php do_action(‘zib_footer_conter’);?>
    7.   </div>
    8. </footer>
    复制代码
    然后我们将下面的代码直接替换我们的上面的代码，原理就是，上面是子比自带的页脚，我们直接替换就可以！
    1. <footer class="api-footer">
    2.   <div class="text-background"></div>
    3.   <div class="footer-content">
    4.     <div class="site-info">
    5.       <h2>腾飞博客测试站</h2>
    6.       <p>本站致力于分享优质实用的互联网资源</p>
    7.     </div>
    8.    
    9.     <div class="api-buttons">
    10.       <button class="glow-btn" style="--btn-color: #4facfe; --btn-light: rgba(79, 172, 254, 0.3);">API文档</button>
    11.       <button class="glow-btn" style="--btn-color: #00f2fe; --btn-light: rgba(0, 242, 254, 0.3);">接口测试</button>
    12.       <button class="glow-btn" style="--btn-color: #7a04eb; --btn-light: rgba(122, 4, 235, 0.3);">开发者中心</button>
    13.       <button class="glow-btn" style="--btn-color: #f9004d; --btn-light: rgba(249, 0, 77, 0.3);">价格方案</button>
    14.       <button class="glow-btn" style="--btn-color: #fee140; --btn-light: rgba(254, 225, 64, 0.3);">联系我们</button>
    15.       <button class="glow-btn" style="--btn-color: #34c759; --btn-light: rgba(52, 199, 89, 0.3);">关于我们</button>
    16.     </div>
    17.    
    18.     <div class="copyright">
    19.       <p>© 2025 腾飞博客 版权所有 | 专注于子比主题美化</p>
    20.     </div>
    21.   </div>
    22. </footer>

    24. <style>
    25. *{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}}
    26. </style>

    28. <script>
    29. document.addEventListener('DOMContentLoaded', () => {
    30.   const textContainer = document.querySelector('.text-background');
    31.   const text = '腾飞博客测试站';
    32.   const count = 60;
    33.   
    34.   for (let i = 0; i < count; i++) {
    35.     const textElement = document.createElement('div');
    36.     textElement.className = 'floating-text';
    37.     textElement.textContent = text;
    38.    
    39.     const left = Math.random() * 100;
    40.     const top = Math.random() * 100;
    41.    
    42.     const size = 18 + Math.random() * 30;
    43.    
    44.     const delay = Math.random() * 5;
    45.     const opacity = 0.2 + Math.random() * 0.5;
    46.    
    47.     textElement.style.left = `${left}%`;
    48.     textElement.style.top = `${top}%`;
    49.     textElement.style.fontSize = `${size}px`;
    50.     textElement.style.animationDelay = `${delay}s`;
    51.     textElement.style.opacity = opacity;
    52.    
    53.     textContainer.appendChild(textElement);
    54.   }
    55.     const footer = document.querySelector('.api-footer');
    56.   let angle = 0;
    57.   
    58.   setInterval(() => {
    59.     angle = (angle + 0.1) % 360;
    60.     footer.style.background = `linear-gradient(${angle}deg, #0f0c29 0%, #302b63 50%, #24243e 100%)`;
    61.   }, 5000);
    62. });
    63. </script>
    复制代码
    代码里面有一行：const text = '腾飞博客测试站';，这个是文字漂浮，可以自定义自己的网站名字！！
    # 子比主题

    本帖被以下淘专辑推荐:

    路虽远，行则将至；事虽难，做则必成。
    回复 送礼

    使用道具 举报

    相关帖子
    返回列表 发布新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    飞流广播+ 发布

    飞流：这论坛到底有没有资本给我投资一下啊！
    		07-20 22:07
    系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。
    		02-21 02:22
    		01-24 12:40
    站内通告

    📢 六月份后均不在线，请悉知

    提供资源交易、信息共享、靓号交流、技术变现、学习问答、兴趣娱乐等全面服务。

    1.丰富功能系统，扩展社区特色玩法，打造最好的互联网聚集圈子。

    2.准确信息真实交易，安全快捷又方便，让虚拟交易面对面。

    3. 天上不会掉馅饼，话术骗术迷人心，切勿脱离平台线下交易，被骗与平台无关！

    4. 欺诈骗钱，违规违法将视情受到警告&禁言&封号甚至检举至👮🏻‍♀️处理！

    官方Q群：1003810038钉推群：BAYR2383 站长QQ：3388700000

    解锁会员权限

    开通会员

    解锁海量优质VIP资源

    立刻开通
    我的主题
    搜索
    快速回复
    返回列表

    • 下载飞流灵通APP

    • QQ群

    返回顶部

    只需一步极速注册

    数字靓号爱好者聚集地

    资源交易安全省心放心

    原创内容精品资源大放送

    飞流论坛（FLLT.CN），一个专注于资源信息发布、虚拟网络交易、技术学习与娱乐社交的交流平台。

    关于我们

    纪律公约 官联方式 迭代更新 招贤纳士

    常用功能

    活动中心 竞价十榜 推广奖励 下载多端

    服务引导

    帮助中心 麦粉会员 认证中心 点靓UID
    • 钉钉新帖推送群
    • 官方交流QQ群
    • 站长唯一微信号

    💥客户端|🧿小黑屋|📴手机页|飞流网 |网站地图

    GMT+8, 2026-7-23 07:48 , Processed in 0.062865 second(s), 68 queries, MemCached On , Gzip On.

    飞流论坛 HanAnalytics icp

    Copyright © 2024-2026 飞流网 版权所有 All Rights Reserved. X3.5

    快速回复 返回顶部 返回列表