✨️靓标库🧚‍♂️名人堂⚔️攻守道🎲骰子🥊猜拳🏧黑市🏧银行💹抽奖💝捐助
✨活动💥客户端🎫卡密📜淘帖🧩导读📢推广👛帮助💰️钱包💖关注
  • 首页
  • 社区
  • 资源
  • 拍卖
  • 排行Ranklist
  • 家园Space
  • 圈子
  • 任务
  • 商城
  • 文库
  • 需求
    • 立即注册
    飞流论坛»社区 › 网络中心 › 站长之家 › 子比主题 – 左边悬浮动态抢红包代码
    返回列表 发布新帖
    查看: 84|回复: 0

    [代码技巧] 子比主题 – 左边悬浮动态抢红包代码

    [复制链接]
    SunJu_FaceMall
    社区贡献

    315

    主题

    190

    回帖

    1万

    积分

    等级头衔
    Icon组别 : 管理员
    Icon等级 :

    积分成就
       钻石 : 524 颗
       贡献 : 1849 点
       金币 : 12 枚
    Icon在线时间 : 1297 小时
    Icon注册时间 : 2024-11-22
    Icon最后登录 : 2025-12-9

    荣誉勋章

    会员LV.1会员LV.2会员LV.3会员LV.4会员LV.5会员LV.6会员LV.7会员LV.8会员LV.9会员LV.10

    风云·优秀版主
    飞流名人堂成员

    1

    实名认证 手机认证 vip vip-year FLLTCN发表于 2025-10-10 15:53:25 | 查看全部 |阅读模式 浙江金华

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

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

    ×
    一款左侧悬浮挂件，动态抖动效果，很多站长用于自己的网站来点击跳转到活动入口，可以用来做自己的左侧悬挂效果，这是PC是悬浮挂件，手机自适应的，这个适应很多网站，不止是子比，我只是在这里分享子比的教程

    image.webp

    代码部署


    css代码较长，建议单独新建css文件，随便文件名字，你要知道新建css的文件目录，这里我就不详说了，直接开始代码
    CSS代码
    自己在自己的服务器新建一个CSS文件，放进去
    1. @media screen and (max-width: 768px){/* wap */
    2.     .tmall_tab {
    3.         position:fixed;
    4.         bottom:5rem;
    5.         left:.8rem;
    6.         z-index:100;
    7.         width:4.7rem;
    8.     }
    9.   .tmall_tab a{
    10.       display:block;
    11.       width:4.7rem;
    12.       height:6rem;
    13.       background:url(/tb.png) no-repeat;    /* 修改此处图片地址*/
    14.       background-size: 100%;
    15.         display: block;
    16.     }
    17. }
    18. @media screen and (min-width: 768px){/* pc */
    19.     .tmall_tab {
    20.         position: fixed;
    21.         left: 6%;
    22.         bottom: 175px;
    23.         z-index: 100;
    24.         width:140px;
    25.     }
    26.   .tmall_tab a{
    27.         display: block;
    28.         width: 140px;
    29.     height:168px;
    30.     background:url(/tb.png) no-repeat;   /* 修改此处图片地址*/
    31.     }
    32. }
    33. @-webkit-keyframes site-anim-closeup {
    34.   from {
    35.   -webkit-transform:translate3d(0,0,0) scale(1);
    36.   opacity:1;
    37. }
    38. to {
    39.   -webkit-transform:translate3d(0,400px,0) scale(2);
    40.   opacity:0.5;
    41. }
    42. }@keyframes site-anim-closeup {
    43.   from {
    44.   transform:translate3d(0,0,0) scale(1);
    45.   opacity:1;
    46. }
    47. to {
    48.   transform:translate3d(0,400px,0) scale(2);
    49.   opacity:0.5;
    50. }
    51. }.site-out-up {
    52.   -webkit-animation-duration:3s;
    53.   animation-duration:3s;
    54.   -webkit-animation-fill-mode:both;
    55.   animation-fill-mode:both;
    56.   -webkit-animation-name:site-anim-closeup;
    57.   animation-name:site-anim-closeup;
    58.   overflow:hidden;
    59. }
    60. @-webkit-keyframes mm_wf_scale {
    61.   0% {
    62.   -webkit-transform:scale(1);
    63.   transform:scale(1);
    64. }
    65. 50% {
    66.   -webkit-transform:scale(1.1);
    67.   transform:scale(1.1);
    68. }
    69. 100% {
    70.   -webkit-transform:scale(1);
    71.   transform:scale(1);
    72. }
    73. }@keyframes mm_wf_scale {
    74.   0% {
    75.   -webkit-transform:scale(1);
    76.   transform:scale(1);
    77. }
    78. 50% {
    79.   -webkit-transform:scale(1.1);
    80.   transform:scale(1.1);
    81. }
    82. 100% {
    83.   -webkit-transform:scale(1);
    84.   transform:scale(1);
    85. }
    86. }.mm_wf_scale {
    87.   -webkit-animation:mm_wf_scale 0.5s ease infinite;
    88.   animation:mm_wf_scale 0.5s ease infinite;
    89. }
    90. .mm_wf_scale_1 {
    91.   -webkit-animation:mm_wf_scale 1s ease infinite;
    92.   animation:mm_wf_scale 1s ease infinite;
    93. }
    94. @-webkit-keyframes mm_wf_d11_icon_updown {
    95.   0% {
    96.   -webkit-transform:translateY(0);
    97.   transform:translateY(0);
    98. }
    99. 50% {
    100.   -webkit-transform:translateY(5%);
    101.   transform:translateY(5%);
    102. }
    103. 100% {
    104.   -webkit-transform:translateY(0);
    105.   transform:translateY(0);
    106. }
    107. }@keyframes mm_wf_d11_icon_updown {
    108.   0% {
    109.   -webkit-transform:translateY(0);
    110.   transform:translateY(0);
    111. }
    112. 50% {
    113.   -webkit-transform:translateY(5%);
    114.   transform:translateY(5%);
    115. }
    116. 100% {
    117.   -webkit-transform:translateY(0);
    118.   transform:translateY(0);
    119. }
    120. }.mm_wf_d11_icon_updown {
    121.   -webkit-animation:mm_wf_d11_icon_updown 1s ease infinite;
    122.   animation:mm_wf_d11_icon_updown 1s ease infinite;
    123. }
    124. @-webkit-keyframes mm_wf_d11_updown {
    125.   0% {
    126.   -webkit-transform:translateY(0);
    127.   transform:translateY(0);
    128. }
    129. 50% {
    130.   -webkit-transform:translateY(-10px);
    131.   transform:translateY(-10px);
    132. }
    133. 100% {
    134.   -webkit-transform:translateY(0);
    135.   transform:translateY(0);
    136. }
    137. }@keyframes mm_wf_d11_updown {
    138.   0% {
    139.   -webkit-transform:translateY(0);
    140.   transform:translateY(0);
    141. }
    142. 50% {
    143.   -webkit-transform:translateY(-10px);
    144.   transform:translateY(-10px);
    145. }
    146. 100% {
    147.   -webkit-transform:translateY(0);
    148.   transform:translateY(0);
    149. }
    150. }.mm_wf_d11_updown {
    151.   -webkit-animation:mm_wf_d11_updown 3s ease infinite;
    152.   animation:mm_wf_d11_updown 3s ease infinite;
    153. }
    154. @-webkit-keyframes mm_wf_shake {
    155.   0%,60%,80%,100% {
    156.   -webkit-transform:rotate(0deg);
    157.   transform:rotate(0deg);
    158. }
    159. 65%,85% {
    160.   -webkit-transform:rotate(5deg);
    161.   transform:rotate(5deg);
    162. }
    163. 75%,95% {
    164.   -webkit-transform:rotate(-5deg);
    165.   transform:rotate(-5deg);
    166. }
    167. }@keyframes mm_wf_shake {
    168.   0%,60%,80%,100% {
    169.   -webkit-transform:rotate(0deg);
    170.   transform:rotate(0deg);
    171. }
    172. 65%,85% {
    173.   -webkit-transform:rotate(5deg);
    174.   transform:rotate(5deg);
    175. }
    176. 75%,95% {
    177.   -webkit-transform:rotate(-5deg);
    178.   transform:rotate(-5deg);
    179. }
    180. }.mm_wf_d11_shake {
    181.   -webkit-animation:mm_wf_shake 1s ease infinite;
    182.   animation:mm_wf_shake 1s ease infinite;
    183. }
    184. @-webkit-keyframes mm_wf_bg_rotate {
    185.   0% {
    186.   -webkit-transform:rotate(0);
    187.   transform:rotate(0);
    188. }
    189. 100% {
    190.   -webkit-transform:rotate(360deg);
    191.   transform:rotate(360deg);
    192. }
    193. }@keyframes mm_wf_bg_rotate {
    194.   0% {
    195.   -webkit-transform:rotate(0);
    196.   transform:rotate(0);
    197. }
    198. 100% {
    199.   -webkit-transform:rotate(360deg);
    200.   transform:rotate(360deg);
    201. }
    202. }.mm_wf_bg_rotate {
    203.   -webkit-animation:mm_wf_bg_rotate 10s linear infinite;
    204.   animation:mm_wf_bg_rotate 10s linear infinite;
    205. }
    206. .mm_wf_bg_rotate2 {
    207.   -webkit-animation:mm_wf_bg_rotate 7s linear infinite;
    208.   animation:mm_wf_bg_rotate 7s linear infinite;
    209. }
    210. @-webkit-keyframes mm_wf_bg_opacity {
    211.   0% {
    212.   opacity:0;
    213. }
    214. 20% {
    215.   opacity:1;
    216. }
    217. 30% {
    218.   opacity:1;
    219. }
    220. 100% {
    221.   opacity:0;
    222. }
    223. }@keyframes mm_wf_bg_opacity {
    224.   0% {
    225.   opacity:0;
    226. }
    227. 20% {
    228.   opacity:1;
    229. }
    230. 30% {
    231.   opacity:1;
    232. }
    233. 100% {
    234.   opacity:0;
    235. }
    236. }.mm_wf_bg_opacity {
    237.   -webkit-animation:mm_wf_bg_opacity 2s linear infinite;
    238.   animation:mm_wf_bg_opacity 2s linear infinite;
    239. }
    240. .mm_wf_bg_opacity2 {
    241.   -webkit-animation:mm_wf_bg_opacity 2s linear infinite;
    242.   animation:mm_wf_bg_opacity 2s linear infinite;
    243.   -webkit-animation-delay:1s;
    244.   animation-delay:1s;
    245. }
    246. @-webkit-keyframes mm_wf_redbag_1 {
    247.   0% {
    248.   opacity:0;
    249.   -webkit-transform:translate(0,0);
    250.   transform:translate(0,0);
    251. }
    252. 20% {
    253.   opacity:1;
    254.   -webkit-transform:translate(10px,-10px);
    255.   transform:translate(10px,-10px);
    256. }
    257. 100% {
    258.   opacity:0.4;
    259.   -webkit-transform:translate(200px,-80px);
    260.   transform:translate(200px,-80px);
    261. }
    262. }@keyframes mm_wf_redbag_1 {
    263.   0% {
    264.   opacity:0;
    265.   -webkit-transform:translate(0,0);
    266.   transform:translate(0,0);
    267. }
    268. 20% {
    269.   opacity:1;
    270.   -webkit-transform:translate(10px,-10px);
    271.   transform:translate(10px,-10px);
    272. }
    273. 100% {
    274.   opacity:0.4;
    275.   -webkit-transform:translate(200px,-80px);
    276.   transform:translate(200px,-80px);
    277. }
    278. }.mm_wf_redbag_1 {
    279.   -webkit-animation:mm_wf_redbag_1 1.2s ease-in infinite;
    280.   animation:mm_wf_redbag_1 1.2s ease-in infinite;
    281. }
    282. @-webkit-keyframes mm_wf_redbag_2 {
    283.   0% {
    284.   opacity:0;
    285.   -webkit-transform:translate(0,0);
    286.   transform:translate(0,0);
    287. }
    288. 20% {
    289.   opacity:1;
    290.   -webkit-transform:translate(-10px,-10px);
    291.   transform:translate(-10px,-10px);
    292. }
    293. 100% {
    294.   opacity:0.4;
    295.   -webkit-transform:translate(-200px,-80px);
    296.   transform:translate(-200px,-80px);
    297. }
    298. }@keyframes mm_wf_redbag_2 {
    299.   0% {
    300.   opacity:0;
    301.   -webkit-transform:translate(0,0);
    302.   transform:translate(0,0);
    303. }
    304. 20% {
    305.   opacity:1;
    306.   -webkit-transform:translate(-10px,-10px);
    307.   transform:translate(-10px,-10px);
    308. }
    309. 100% {
    310.   opacity:0.4;
    311.   -webkit-transform:translate(-200px,-80px);
    312.   transform:translate(-200px,-80px);
    313. }
    314. }.mm_wf_redbag_2 {
    315.   -webkit-animation:mm_wf_redbag_2 1.2s ease-in infinite;
    316.   animation:mm_wf_redbag_2 1.2s ease-in infinite;
    317.   -webkit-animation-delay:0.4s;
    318.   animation-delay:0.4s;
    319. }
    复制代码

    HTML代码
    我们可以看到下面的618.css那个就是你刚才新建的css文件目录，然后推广链接你自己随便填，输入你的活动链接即可
    在子比主题->>全局-自定义代码->>自定义头部/底部HTML填写如下代码：
    1. <!-- 修改此处css地址 -->
    2.     <link rel="stylesheet" href="/618.css" type="text/css" media="all">
    3. <div class="tmall_tab">
    4.     <!-- 修改此处为自己的推广链接 -->
    5.     <a href="自己的推广链接" target="_blank" class="mm_wf_d11_shake"></a>
    6. </div>
    复制代码

    素材图片
    在这里分享两个素材，这两个素材，放在你刚才的CSS文件里面的代码，将素材上传到你的服务器，获取素材链接，放到CSS里面即可，素材下载方式：点击图片，右上角下载即可
    tengfei_down - 2025-10-10T155257.337.jpg tengfei_down - 2025-10-10T155256.262.jpg

    # 子比主题

    本帖被以下淘专辑推荐:

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

    使用道具 举报

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

    本版积分规则

    飞流广播+ 发布

    系统消息：柒沐已经连续答对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

    关于我们

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

    常用功能

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

    服务引导

    帮助中心 麦粉会员 认证中心 点靓UID
    投诉/建议/商务合作联系

    fl@fllt.cn

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

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

    GMT+8, 2025-12-10 13:49 , Processed in 0.103761 second(s), 61 queries, MemCached On , Gzip On.

    Based on XJ-TX X3.5 Licensed

    飞流论坛 HanAnalytics icp Astro vhAstro-Theme

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