返回列表 发布新帖
查看: 411|回复: 1

[代码技巧] 给网页底部添加科技感十足的登录提示状态栏

[复制链接]
社区贡献

6

主题

2

回帖

706

积分

等级头衔
Icon组别 : 菜鸟
Icon等级 :

积分成就
   钻石 : -8 颗
   贡献 : 470 点
   金币 : 8 枚
Icon在线时间 : 100 小时
Icon注册时间 : 2025-7-12
Icon最后登录 : 2025-10-28

荣誉勋章

炎龙LV.9

风云·优秀版主

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

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

×
效果如下
1000216528.webp
代码部分
  1. <!--飞流登录提示悬浮栏-->
  2. {if $_G['uid'] == 0}  
  3. <style>
  4. .footSideBar[data-v-468191f6]{position:fixed;margin:auto;left:0;right:0;-webkit-box-pack:justify;justify-content:space-between;bottom:40px;width:1040px;height:76px;background:rgba(27,35,55,.4);box-shadow:0 2px 18px rgba(42,49,67,.05);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:18px;z-index:99999;}.footSideBar{position:fixed;z-index:1000;left:calc(50% + 110px);-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-box-align:center;align-items:center;-webkit-box-pack:justify;justify-content:space-between;bottom:24px;display:-webkit-box;display:flex;width:932px;height:80px;padding:0 24px 0 32px;border-radius:16px;background:rgba(27,35,55,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.footSideBar:hover{background:rgba(27,35,55,.9)}.footSideBar .left_warp .left_word{font-weight:600;font-size:16px;line-height:24px;color:#fff}.footSideBar .left_warp .login_ad_list{margin-top:6px;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.footSideBar .left_warp .login_ad_list .login_ad_item{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}.footSideBar .left_warp .login_ad_list .login_ad_item span{margin-left:6px;color:#fff;font-size:12px;line-height:20px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.footSideBar .left_warp .login_ad_list .login_ad_item:not(:last-child){margin-right:24px}.footSideBar .login-button{display:-webkit-box;display:flex;width:140px;height:44px;border-radius:40px;background:#c3d3ff;--duration:7s;--easing:linear;--c-color-1:rgba(78,255,233,0.7);--c-color-2:#1a23ff;--c-color-3:#7553ff;--c-color-4:rgba(86,255,234,0.7);--c-shadow:rgba(22,201,180,0.2);--c-shadow-inset-top:rgba(60,255,231,0.9);--c-shadow-inset-bottom:rgba(106,255,237,0.8);--c-radial-inner:#579df7;--c-radial-outer:#579df7;--c-color:#fff;outline:none;position:relative;cursor:pointer;border:none;display:table;padding:0;margin:0;text-align:center;letter-spacing:.02em;line-height:1.5;color:var(--c-color);background:radial-gradient(circle,var(--c-radial-inner),var(--c-radial-outer) 80%);box-shadow:0 0 14px var(--c-shadow)}.footSideBar .login-button,.footSideBar .login-button span{-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;font-weight:600;font-size:16px}.footSideBar .login-button span{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);line-height:24px;display:-webkit-box;display:flex}.footSideBar .login-button:before{content:"";pointer-events:none;position:absolute;z-index:3;left:0;top:0;right:0;bottom:0;border-radius:40px;box-shadow:inset 0 3px 12px var(--c-shadow-inset-top),inset 0 -3px 4px var(--c-shadow-inset-bottom)}.footSideBar .login-button .login-button_wrapper{-webkit-mask-image:-webkit-radial-gradient(#fff,#000);overflow:hidden;border-radius:40px;min-width:140px;padding:10px 0}.footSideBar .login-button .login-button_wrapper span{position:relative;z-index:1}.footSideBar .login-button:hover{--duration:1400ms}.footSideBar .login-button .login-button_wrapper .circle{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;-webkit-filter:blur(8px);filter:blur(8px);-webkit-filter:blur(var(--blur,8px));filter:blur(var(--blur,8px));background:transparent;background:var(--background,transparent);-webkit-transform:translate(0) translateZ(0);transform:translate(0) translateZ(0);-webkit-transform:translate(var(--x,0),var(--y,0)) translateZ(0);transform:translate(var(--x,0),var(--y,0)) translateZ(0);-webkit-animation:none var(--duration) var(--easing) infinite;animation:none var(--duration) var(--easing) infinite;-webkit-animation:var(--animation,none) var(--duration) var(--easing) infinite;animation:var(--animation,none) var(--duration) var(--easing) infinite}.footSideBar .login-button .login-button_wrapper .circle.circle-1,.footSideBar .login-button .login-button_wrapper .circle.circle-9,.footSideBar .login-button .login-button_wrapper .circle.circle-10{--background:var(--c-color-4)}.footSideBar .login-button .login-button_wrapper .circle.circle-3,.footSideBar .login-button .login-button_wrapper .circle.circle-4{--background:var(--c-color-2);--blur:14px}.footSideBar .login-button .login-button_wrapper .circle.circle-5,.footSideBar .login-button .login-button_wrapper .circle.circle-6{--background:var(--c-color-3);--blur:16px}.footSideBar .login-button .login-button_wrapper .circle.circle-2,.footSideBar .login-button .login-button_wrapper .circle.circle-7,.footSideBar .login-button .login-button_wrapper .circle.circle-8,.footSideBar .login-button .login-button_wrapper .circle.circle-11,.footSideBar .login-button .login-button_wrapper .circle.circle-12{--background:var(--c-color-1);--blur:12px}.footSideBar .login-button .login-button_wrapper .circle.circle-1{--x:0;--y:-40px;--animation:circle-1}.footSideBar .login-button .login-button_wrapper .circle.circle-2{--x:92px;--y:8px;--animation:circle-2}.footSideBar .login-button .login-button_wrapper .circle.circle-3{--x:-12px;--y:-12px;--animation:circle-3}.footSideBar .login-button .login-button_wrapper .circle.circle-4{--x:80px;--y:-12px;--animation:circle-4}.footSideBar .login-button .login-button_wrapper .circle.circle-5{--x:12px;--y:-4px;--animation:circle-5}.footSideBar .login-button .login-button_wrapper .circle.circle-6{--x:56px;--y:16px;--animation:circle-6}.footSideBar .login-button .login-button_wrapper .circle.circle-7{--x:8px;--y:28px;--animation:circle-7}.footSideBar .login-button .login-button_wrapper .circle.circle-8{--x:28px;--y:-4px;--animation:circle-8}.footSideBar .login-button .login-button_wrapper .circle.circle-9{--x:20px;--y:-12px;--animation:circle-9}.footSideBar .login-button .login-button_wrapper .circle.circle-10{--x:64px;--y:16px;--animation:circle-10}.footSideBar .login-button .login-button_wrapper .circle.circle-11{--x:4px;--y:4px;--animation:circle-11}.footSideBar .login-button .login-button_wrapper .circle.circle-12{--blur:14px;--x:52px;--y:4px;--animation:circle-12}@-webkit-keyframes circle-1{33%{-webkit-transform:translateY(16px) translateZ(0);transform:translateY(16px) translateZ(0)}66%{-webkit-transform:translate(12px,64px) translateZ(0);transform:translate(12px,64px) translateZ(0)}}@keyframes circle-1{33%{-webkit-transform:translateY(16px) translateZ(0);transform:translateY(16px) translateZ(0)}66%{-webkit-transform:translate(12px,64px) translateZ(0);transform:translate(12px,64px) translateZ(0)}}@-webkit-keyframes circle-2{33%{-webkit-transform:translate(80px,-10px) translateZ(0);transform:translate(80px,-10px) translateZ(0)}66%{-webkit-transform:translate(72px,-48px) translateZ(0);transform:translate(72px,-48px) translateZ(0)}}@keyframes circle-2{33%{-webkit-transform:translate(80px,-10px) translateZ(0);transform:translate(80px,-10px) translateZ(0)}66%{-webkit-transform:translate(72px,-48px) translateZ(0);transform:translate(72px,-48px) translateZ(0)}}@-webkit-keyframes circle-3{33%{-webkit-transform:translate(20px,12px) translateZ(0);transform:translate(20px,12px) translateZ(0)}66%{-webkit-transform:translate(12px,4px) translateZ(0);transform:translate(12px,4px) translateZ(0)}}@keyframes circle-3{33%{-webkit-transform:translate(20px,12px) translateZ(0);transform:translate(20px,12px) translateZ(0)}66%{-webkit-transform:translate(12px,4px) translateZ(0);transform:translate(12px,4px) translateZ(0)}}@-webkit-keyframes circle-4{33%{-webkit-transform:translate(76px,-12px) translateZ(0);transform:translate(76px,-12px) translateZ(0)}66%{-webkit-transform:translate(112px,-8px) translateZ(0);transform:translate(112px,-8px) translateZ(0)}}@keyframes circle-4{33%{-webkit-transform:translate(76px,-12px) translateZ(0);transform:translate(76px,-12px) translateZ(0)}66%{-webkit-transform:translate(112px,-8px) translateZ(0);transform:translate(112px,-8px) translateZ(0)}}@-webkit-keyframes circle-5{33%{-webkit-transform:translate(84px,28px) translateZ(0);transform:translate(84px,28px) translateZ(0)}66%{-webkit-transform:translate(40px,-32px) translateZ(0);transform:translate(40px,-32px) translateZ(0)}}@keyframes circle-5{33%{-webkit-transform:translate(84px,28px) translateZ(0);transform:translate(84px,28px) translateZ(0)}66%{-webkit-transform:translate(40px,-32px) translateZ(0);transform:translate(40px,-32px) translateZ(0)}}@-webkit-keyframes circle-6{33%{-webkit-transform:translate(28px,-16px) translateZ(0);transform:translate(28px,-16px) translateZ(0)}66%{-webkit-transform:translate(76px,-56px) translateZ(0);transform:translate(76px,-56px) translateZ(0)}}@keyframes circle-6{33%{-webkit-transform:translate(28px,-16px) translateZ(0);transform:translate(28px,-16px) translateZ(0)}66%{-webkit-transform:translate(76px,-56px) translateZ(0);transform:translate(76px,-56px) translateZ(0)}}@-webkit-keyframes circle-7{33%{-webkit-transform:translate(8px,28px) translateZ(0);transform:translate(8px,28px) translateZ(0)}66%{-webkit-transform:translate(20px,-60px) translateZ(0);transform:translate(20px,-60px) translateZ(0)}}@keyframes circle-7{33%{-webkit-transform:translate(8px,28px) translateZ(0);transform:translate(8px,28px) translateZ(0)}66%{-webkit-transform:translate(20px,-60px) translateZ(0);transform:translate(20px,-60px) translateZ(0)}}@-webkit-keyframes circle-8{33%{-webkit-transform:translate(32px,-4px) translateZ(0);transform:translate(32px,-4px) translateZ(0)}66%{-webkit-transform:translate(56px,-20px) translateZ(0);transform:translate(56px,-20px) translateZ(0)}}@keyframes circle-8{33%{-webkit-transform:translate(32px,-4px) translateZ(0);transform:translate(32px,-4px) translateZ(0)}66%{-webkit-transform:translate(56px,-20px) translateZ(0);transform:translate(56px,-20px) translateZ(0)}}@-webkit-keyframes circle-9{33%{-webkit-transform:translate(20px,-12px) translateZ(0);transform:translate(20px,-12px) translateZ(0)}66%{-webkit-transform:translate(80px,-8px) translateZ(0);transform:translate(80px,-8px) translateZ(0)}}@keyframes circle-9{33%{-webkit-transform:translate(20px,-12px) translateZ(0);transform:translate(20px,-12px) translateZ(0)}66%{-webkit-transform:translate(80px,-8px) translateZ(0);transform:translate(80px,-8px) translateZ(0)}}@-webkit-keyframes circle-10{33%{-webkit-transform:translate(68px,20px) translateZ(0);transform:translate(68px,20px) translateZ(0)}66%{-webkit-transform:translate(100px,28px) translateZ(0);transform:translate(100px,28px) translateZ(0)}}@keyframes circle-10{33%{-webkit-transform:translate(68px,20px) translateZ(0);transform:translate(68px,20px) translateZ(0)}66%{-webkit-transform:translate(100px,28px) translateZ(0);transform:translate(100px,28px) translateZ(0)}}@-webkit-keyframes circle-11{33%{-webkit-transform:translate(4px,4px) translateZ(0);transform:translate(4px,4px) translateZ(0)}66%{-webkit-transform:translate(68px,20px) translateZ(0);transform:translate(68px,20px) translateZ(0)}}@keyframes circle-11{33%{-webkit-transform:translate(4px,4px) translateZ(0);transform:translate(4px,4px) translateZ(0)}66%{-webkit-transform:translate(68px,20px) translateZ(0);transform:translate(68px,20px) translateZ(0)}}@-webkit-keyframes circle-12{33%{-webkit-transform:translate(56px) translateZ(0);transform:translate(56px) translateZ(0)}66%{-webkit-transform:translate(60px,-32px) translateZ(0);transform:translate(60px,-32px) translateZ(0)}}@keyframes circle-12{33%{-webkit-transform:translate(56px) translateZ(0);transform:translate(56px) translateZ(0)}66%{-webkit-transform:translate(60px,-32px) translateZ(0);transform:translate(60px,-32px) translateZ(0)}}.footNoSideBar{left:0;right:0;-webkit-transform:none;transform:none;margin:0 auto}
  5. </style>
  6. <div class="footSideBar footNoSideBar" style="" data-v-468191f6="">
  7. <div class="left_warp">
  8. <p class="left_word">一键注册登录,获悉互联网最新资源讯息!</p>
  9. <ul class="login_ad_list">
  10. <li class="login_ad_item">
  11. <img src="//pub-cdn-oss.chuangkit.com/ad_position/07b0bea0b5ff4a4a868214402dffbe06" width="16" height="16">
  12. <span>1000+资源定期上新</span>
  13. </li>
  14. <li class="login_ad_item">
  15. <img src="//pub-cdn-oss.chuangkit.com/ad_position/aa87fcf0c39d491d87776f9ff9c7605c" width="16" height="16">
  16. <span>2000+麦友在线畅谈</span>
  17. </li>
  18. <li class="login_ad_item">
  19. <img src="//pub-cdn-oss.chuangkit.com/ad_position/c9fd421689dc4a3598665a44da2967b4" width="16" height="16">
  20. <span>网络大户常驻Q届聚集地</span>
  21. </li>
  22. <li class="login_ad_item">
  23. <img src="//pub-cdn-oss.chuangkit.com/ad_position/90d13eaff9644a67a6dbeb060114d90b" width="16" height="16">
  24. <span>安全模式交易不止放心</span>
  25. </li>
  26. </ul>
  27. </div>
  28. <div class="login-button signin-loader">
  29. <div class="login-button_wrapper">
  30. <!--<span>立即登录</span>-->
  31. <span onclick="window.location.href='/member.php?mod=logging&action=login';">立即登录</span>
  32. <div class="circle circle-12"></div>
  33. <div class="circle circle-11"></div>
  34. <div class="circle circle-10"></div>
  35. <div class="circle circle-9"></div>
  36. <div class="circle circle-8"></div>
  37. <div class="circle circle-7"></div>
  38. <div class="circle circle-6"></div>
  39. <div class="circle circle-5"></div>
  40. <div class="circle circle-4"></div>
  41. <div class="circle circle-3"></div>
  42. <div class="circle circle-2"></div>
  43. <div class="circle circle-1"></div>
  44. </div>
  45. </div>
  46. {/if}
  47. <!--飞流登录提示悬浮栏-->
复制代码
上述代码复制到模板footer.php适当位置即可,纯html和css,其他网页也通用。针对discuz模板添加了已登录状态下,不再显示登录栏的条件判断
诚信连接交易,资源创造价值。
社区贡献

13

主题

440

回帖

8624

积分

等级头衔
Icon组别 : 老兵
Icon等级 :

积分成就
   钻石 : 0 颗
   贡献 : 2581 点
   金币 : 0 枚
Icon在线时间 : 74 小时
Icon注册时间 : 2024-11-30
Icon最后登录 : 2025-10-26

荣誉勋章

起源之星(限定)国庆节中秋节

四哥
UID:44
暂无靓号,点击前往开通
发表于 2025-8-2 16:05:30 | 查看全部 新疆克拉玛依
我现在很懊恼,这么久才发现你这么牛逼的大佬!
诚信连接交易,资源创造价值。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

飞流广播+ 发布

系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
10-30 17:02
系统消息:柒沐已经连续答对10道难题,逆天学霸谁与争锋?!#每日答题#
10-09 09:07
系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
09-24 09:00
系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
09-11 11:40
系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
09-02 09:17
系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
08-27 08:56
系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
08-20 15:12
系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
08-03 10:22
系统消息:柒沐已经连续答对10道难题,逆天学霸谁与争锋?!#每日答题#
06-30 08:57
系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
06-18 09:14
系统消息:清风网络已经连续答对10道难题,逆天学霸谁与争锋?!#每日答题#
04-11 09:40
系统消息:清风网络已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
04-10 09:31
系统消息:IXM77777已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
04-09 13:44
系统消息:清风网络已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
04-09 09:22
系统消息:柒沐已经连续答对10道难题,逆天学霸谁与争锋?!#每日答题#
04-09 08:52
系统消息:清风网络已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
04-08 09:24
系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
04-07 09:02
系统消息:柒沐已经连续答对10道难题,逆天学霸谁与争锋?!#每日答题#
02-27 09:35
系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
02-26 09:06
系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
02-25 08:49
站内通告

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

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

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

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

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

官方Q群:123129钉推群:BAYR2383 站长QQ:3220000000

投诉/建议/商务合作联系

fl@fllt.cn

严禁私下交易,被骗与本站无关。
违反交易细则,取证立查严惩。
  • 钉钉新帖推送群
  • 官方交流QQ群
  • 站长唯一微信号

👮曝光Ta|🧿小黑屋|📴手机页|飞流网 ( 渝ICP备2025054677号-1|电信增值许可 渝B2-20250789 )|网站地图

GMT+8, 2025-12-14 05:51 , Processed in 0.078203 second(s), 66 queries, MemCached On , Gzip On.

Based on XJ-TX X3.5 Licensed

飞流论坛 HanAnalytics icp Astro vhAstro-Theme

关灯 在本版发帖
扫一扫添加微信客服
QQ客服返回顶部
快速回复 返回顶部 返回列表