Discuz模板|Discuz插件|Discuz教程|Discuz素材免费下载

 找回密码
 立即注册

QQ登录

只需一步,快速开始

广告
温馨提示:本站所有DZ相关模板、插件、教程(包括DZ应用中心已下架插件、模板)所有用户可全部免费下载,无任何收费模式(不包括VIP版块非DZ资源,VIP版块需购买会员组方可下载),如本站没有您需要的插件或模板,请自行前往淘宝互站网送吗网等第三方站点搜索相关插件或模板进行低价格购买下载本站非常不建议用户浪费金钱前往DZ应用中心购买。

2018风格 更新消息通知代码

[复制链接]
tuyuanma 发表于 2019-11-28 22:01:24 | 显示全部楼层 |阅读模式
温馨提醒:禁止内容附带广告图片、二维码图片,否则将在不通知情况下永久禁言账号!
欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]


7.jpg 首先在template\simple_white\common\extend_common.css  这个文件4 M: R- q. W3 T  c- y$ Z- w: x
找到
  1. .pm .c{background: #f8f8f8;}
复制代码

8 C8 K( ]4 v% |( [在下面加
$ @! M2 l* R$ P& B, \+ g+ f
  1. /* 通知 */3 P4 ]4 Z6 j4 p' r4 h% P0 ^
  2. .notify{position:absolute;top:30px;right:11px}& J  ~9 }& f4 u' X1 x% K
  3. .notify .heartbit{position:absolute;top:-20px;right:-16px;height:25px;width:25px;z-index:10;border:4px solid;border-color:#ff0001;border-radius:70px;animation:heartbit 1s ease-out;-moz-animation:heartbit 1s ease-out;-moz-animation-iteration-count:infinite;-o-animation:heartbit 1s ease-out;-o-animation-iteration-count:infinite;-webkit-animation:heartbit 1s ease-out;-ms-animation:heartbit 1s ease-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}8 v2 a) c8 A3 v% v
  4. .notify .point{width:6px;height:6px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;background-color:#f90000;position:absolute;right:-3px;top:-7px;z-index:100;}
    : C  A2 ]; n7 n2 ~9 v
  5. @-moz-keyframes heartbit{0%{-moz-transform:scale(0);opacity:0}2 ~# b/ i5 P) }1 b1 X0 p6 T: i
  6. 25%{-moz-transform:scale(0.1);opacity:.1}
    , v  s4 D3 B: |; k! |9 W
  7. 50%{-moz-transform:scale(0.5);opacity:.3}, }1 O- b* f5 l$ v2 h
  8. 75%{-moz-transform:scale(0.8);opacity:.5}. B0 ]1 ?% t5 t$ }" f) R
  9. 100%{-moz-transform:scale(1);opacity:0}}1 @* w; c' S# P  Z2 M/ C
  10. @-webkit-keyframes heartbit{0%{-webkit-transform:scale(0);opacity:0}
    . S3 ]( F5 z" G0 [  l
  11. 25%{-webkit-transform:scale(0.1);opacity:.1}$ E' z) `  t2 f: A
  12. 50%{-webkit-transform:scale(0.5);opacity:.3}/ w8 ^' c2 Y* G9 z) L
  13. 75%{-webkit-transform:scale(0.8);opacity:.5}& H. `: @0 `7 G4 A3 {' B+ H
  14. 100%{-webkit-transform:scale(1);opacity:0}}( `7 o" Q. K; {8 G. |
  15. @-ms-keyframes heartbit{0%{-ms-transform:scale(0);opacity:0}
    , T/ O' n, \: W  W2 i2 t1 e3 v! g
  16. 25%{-ms-transform:scale(0.1);opacity:.1}
    / p- e9 ]/ M+ T- p
  17. 50%{-ms-transform:scale(0.5);opacity:.3}
    # l+ \4 V) |8 U6 W$ c/ g% ?
  18. 75%{-ms-transform:scale(0.8);opacity:.5}4 o% L0 D' ~9 G' z0 j: n* I1 ?
  19. 100%{-ms-transform:scale(1);opacity:0}}
复制代码
然后找到template\simple_white\common\header.php, a& ~9 y& D, q" Z! p
找到这段代码
  1. <a href="home.php?mod=space&do=pm" id="pms" class="fa fa-envelope Button PushNotifications-icon AppHeader-notifications Button--plain" title="消息">{if $_G['member'][newpm]>0}<em>{$_G['member'][newpm]}</em>{/if}</a>
复制代码
把下面的
$ x: T8 U+ _9 |+ u; Z/ v) i
  1. <a href="home.php?mod=space&do=notice&view=mypost" id="notices" class="fa fa-bell Button Messages-icon AppHeader-messages Button--plain" title="提醒">{if $_G['member'][newprompt]>0}<em>{$_G['member'][newprompt]}</em>{/if}</a>
复制代码
替换为
  1. <a href="home.php?mod=space&do=notice&view=mypost" id="notices" class="fa fa-bell Button Messages-icon AppHeader-messages Button--plain" title="提醒"><div style="position: absolute;top: -20px;right: -11px;"><div class="notify">{if $_G['member'][newprompt]>0}<span class="heartbit"></span><span class="point"></span>{/if}</div></div></a>
复制代码
上面的代码中的   -20px;right: -11px
1 t6 t! ^7 s7 s) ^- D+ w% s/ V9 c! A/ |
是定的位置

版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。




自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

广告
493651246站长邮箱:tuyuanma@qq.com 站长QQ:3197813386

© 2001-2013 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

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