WordPress左右滚动公告

老刘 2022-12-20 11:21 老刘弹互联网 | 隐藏边栏 | 抢沙发 | 34 0

文章评分 0 次，平均分 0.0 ：

温馨提醒：本文最后更新于2022年12月20日，部分网盘链接偶尔抽风，下载地址如有失效，请在文章评论区留言或者请私信老刘反馈。

示例

代码

PHP代码中滚动方向改为向上即可滚动显示3行文字内容，这个适合文章页面滚动公告

php

<?php

echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"wp-content/themes/ripro-v2/diy.css\" />"

?>
<div class="container">
<div class="seanggwrap">
<div class="seangg comfff wow fadeInUp">
<div class="seanggspan"><i class="fa fa-volume-up"></i><span>网站公告<sup class="spinner-grow spinner-grow-sm ml-1 small" role="status" aria-hidden="true" style=" width: .6rem; height: .6rem; "></sup></span></div>                              <b></b>
<div class="seanggc">
<marquee hspace="30" scrolldelay="8000" scrollamount="600" width="95%" height="22" align="absmiddle" direction="left" behavior="scroll" onmouseout="this.start()" onmouseover="this.stop()"> <font style="font-size: 14px;">
    <table>
        <tr><td><font color="#007614">【温馨提醒】</font>本站软件类资源均为Windows系统适用，苹果Mac系统用户请绕道哦！>>>>>> <font color="#fa3c64">【限时特惠】</font>VIP会员可免费下载站内所有内容，最低仅需99元，即享全站资源任意下载！>>>>>><font color="#007bff">【提价通知】</font>7月份结束后网站VIP套餐会全面提价，请知悉！ </td></tr>
        <tr><td>【限时特惠】VIP会员可免费下载站内所有内容，最低仅需199元，即享全站资源任意下载！</td></tr>
        <tr><td>【提价通知】7月份结束后网站VIP套餐会全面提价，请知悉！</td></tr>
     </table></font>
</marquee>
</div>
<a href="/vipinfo" target="_blank" class="seanggc-right" title="VIP"><span><i class="fa fa-diamond mr-1"></i>开通VIP畅享无限下载</span></a>
</div>
</div>
</div>

css

/*公告+统计*/
.seanggwrap {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.seangg {
    width: 100%;
    float: left;
    line-height: 30px;
    background: #0095ff42;
    padding: 5px 0 4px 0;
    border-radius: 30px;
    /*margin-right: 1%;*/
}

.seanggspan {
    float: left;
    background: linear-gradient(90deg, #ffc107, #ff7365, #ff82ea, #ffc107);
    background-size: 1400% 300%;
    animation: mymove 10s ease infinite;
    -webkit-animation: mymove 10s ease infinite;
    -moz-animation: mymove 10s ease infinite;
    color: #fff;
    border-radius: 35px;
    font-size: 14px;
    margin-left: 6px;
    padding: 0px 16px;
}

.seanggspan i {
    display: block;
    float: left;
    font-size: 18px;
    color: #ffffff;
    padding: 6px 0px;
    margin-right: 8px;
}

.seanggspan span {
    display: block;
    float: left;
    color: #FFF;
}

.seangg b {
    height: 0px;
    margin-top: 9px;
    width: 1px;
    display: block;
    float: left;
    background: #a8a8a8;
}

.seanggc {
    float: left;
    width: 72%;
    margin-left: 0;
}

.announce-wrap {
    height: 30px;
    overflow: hidden;
}

.seanggc ul li a {
    font-weight: 400;
    color: #51525e;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.seanggc ul li a:hover {
    text-decoration: blink;
}

.seanggc ul li {
    font-size: 14px;
    display: block;
    clear: both;
    height: 30px; /* line-height:30px; */
}

.seanggc ul li span {
    float: right;
    color: #51525e;
    font-size: 12px;
    width: 120px
}

.seanchart {
    float: right;
    height: 50px;
    width: 30%;
    color: #999;
    overflow: hidden;
    margin-top: -6px;
}

.seanchart ul {
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}

.dxb_bc {
    float: right;
}

.seanchart ul li {
    float: left;
    height: 100%;
    margin-left: 13px;
    font-size: 14px;
}

@media (min-width: 992px) {
    .seanchart {
        width: 31%;
    }
}

.seanchart ul li i {
    display: block;
    float: left;
    margin-top: 8px;
    width: 34px;
    height: 34px;
    border-radius: 100%;
    color: #ffffff;
    text-align: center;
    font-size: 20px;
    line-height: 34px;
}

.seanchart ul li.seanchart0 i {
    background-color: #FF5722;
}

.seanchart ul li.seanchart1 i {
    background-color: #f1787f;
}

.seanchart ul li.seanchart2 i {
    background-color: #FF9800;
    /*background: url(../ripro-child/assets/images/icon1.png) 0 0 no-repeat;*/
}

.seanchart ul li.seanchart3 i {
    background-color: #ee2c23;
    /*background: url(../ripro-child/assets/images/icon3.png) 0 0 no-repeat;*/
}

.seanchart ul li.seanchart4 i {
    /*background: url(../ripro-child/assets/images/icon1.png) 0 0 no-repeat;*/
}



.seanchartdiv {
    float: left;
    margin-left: 8px;
    margin-top: 6px;
    text-align: center;
}

.seanchartdiv em {
    font-size: 12px;
    color: #ee2c23;
    font-style: inherit;
}

.seanchartdiv span {
    font-size: 12px;
    color: #ee2c23;
}


.deng-box {
    position: fixed;
    top: -40px;
    right: -20px;
    z-index: 9999;
}

.deng-box1 {
    position: fixed;
    top: -30px;
    right: 10px;
    z-index: 9999;
}

@media (max-width: 767px) {
    .deng-box, .deng-box1 {
        display: none;
    }
}

.deng-box1 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}

.deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 3s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}

.deng-a {
    width: 100px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: 12px 8px 8px 10px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}

.deng-b {
    width: 45px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: -4px 8px 8px 26px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}



.deng:before {
    position: absolute;
    top: -7px;
    left: 29px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    z-index: 999;
    border-radius: 5px 5px 0 0;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}

.deng:after {
    position: absolute;
    bottom: -7px;
    left: 10px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    margin-left: 20px;
    border-radius: 0 0 5px 5px;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}

.deng-t {
    font-family: 华文行楷, Arial, Lucida Grande, Tahoma, sans-serif;
    font-size: 3.2rem;
    color: #dc8f03;
    font-weight: bold;
    line-height: 85px;
    text-align: center;
}

.night .deng-t, .night .deng-box, .night .deng-box1 {
    background: transparent !important;
}

@-moz-keyframes swing {
    0% {
        -moz-transform: rotate(-10deg)
    }
    50% {
        -moz-transform: rotate(10deg)
    }
    100% {
        -moz-transform: rotate(-10deg)
    }
}

@-webkit-keyframes swing {
    0% {
        -webkit-transform: rotate(-10deg)
    }
    50% {
        -webkit-transform: rotate(10deg)
    }
    100% {
        -webkit-transform: rotate(-10deg)
    }
}

@media (max-width: 1500px) {
    .deng-box, .deng-box1 {
        display: none;
    }
}

@media (max-width: 768px) {
    .downinfo .btn--block {
        line-height: 24px;
        width: 100% !important
    }

    .zy h2 {
        margin: 5px;
        width: 100% !important
    }

    #sch_banner {
        padding: 5px 10px 10px !important
    }

    .meta .serv li {
        padding: 10px 0px 0px !important
    }

    .meta .serv {
        padding-bottom: 10px !important;
        margin: 0px 1em 0px 0px !important
    }
}

.downinfo .btn--block {
    min-width: 180px
}

.buy span.Tips {
    color: #fff !important
}

.navbar .showzx {
    color: #ff1841
}

.type_icont_2 {
    background: linear-gradient(90deg, #ffc107, #ff7365, #ff82ea, #ffc107);
    background-size: 1400% 300%;
    animation: mymove 10s ease infinite;
    -webkit-animation: mymove 10s ease infinite;
    -moz-animation: mymove 10s ease infinite;
    color: #fff !important;
    height: 30px !important;
    line-height: 30px !important;
    border-radius: 20px !important;
    border: none;
    margin-left: 20px
}

@keyframes mymove {
    0% {
        background-position: 0 0
    }
    50% {
        background-position: 50% 100%
    }
    100% {
        background-position: 100% 0
    }
}
.seanggc-right {
    float: right;
    border-radius: 35px;
    font-size: 14px;
    margin-right: 6px;
    padding: 0px 16px;
    background: #007614;
}

.seanggc-right span {
    display: block;
    float: left;
    color: #ffffff;
    background: none;
}

「点点赞赏，手留余香」

还没有人赞赏，快来当第一个赞赏的人吧！

给老刘打赏

予人玫瑰，手有余香

66￥
88￥
99￥
188￥
199￥
自定义
￥

￥66

支付

版权声明：
1、本站所有文章内容均来源于互联网，我站仅作收集整理，VIP/积分赞助/打赏等费用仅为维持网站正常运转；
2、本站部分文章、图片不代表本站立场，并不代表本站赞同其观点和对其真实性负责；
3、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报；
4、本站资源大多存储在云盘，如发现链接失效，请联系我们，我们会第一时间更新；
5、本站分享的高质量高清写真图集，出镜模特均为成年女性正常写真无R18内容，仅限用于摄影爱好者提供素材与鉴赏学习；
6、本站所有文章、图片、资源等均为收集自互联网，版权归原作者所有。仅作为个人学习、研究以及欣赏！请在下载后24小时内删除。共同维护和谐健康的互联网！如果您发现本站上有侵犯您的权益的作品，请与我们取得联系，我们会及时删除或者修改。

老刘关注：0 粉丝：78

老刘站长，专注分享互联网知识，深扒互联网底裤，还原互联网真相！分享一些优质内容，带你识别互联网套路

示例

代码

php

css

你可能也喜欢

热评文章

发表评论

老刘推荐

更多商品云商城

正版推荐

随机商品

加入本站

联系方式

关于本站

联系站长

示例

代码

php

css