WordPress上下滚动公告html代码-今日预设

本文最后更新于2022年12月20日，部分网盘链接偶尔抽风，下载地址如有失效，请在文章评论区留言反馈。

示例

代码

html

<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>
<div class="seanggc">
<div class="announce-wrap">
<ul>
<li><font color="#fa3c64">【限时特惠】</font>VIP会员可免费下载站内所有内容，最低仅需99元，即享全站资源任意下载<span>2022.07.01</span></li>
	<li><font color="#007bff">【提价通知】</font>8月份网站VIP套餐会全面提价，请知悉<span>2022.07.20</span></li>
	<li><font color="#007614">【温馨提醒】</font>本站软件类资源均为Windows系统适用，苹果Mac系统用户请绕道哦！<span>长期有效</span></li>	
</ul>
</div>
</div>
<a href="/vip" target="_blank" class="seanggc-right" title="查看更多"><span>开通VIP畅享免费下载</span></a>
</div>
</div>
<script type="text/javascript">
            jQuery(function() {
                'use strict';
                setInterval('AutoScroll(".announce-wrap")', 3000);
            });
        </script>

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;
    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: 1%;
}

.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;
}

声明：
本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
一、本站文中资源为互联网公开资源，我站仅作收集整理；版权归原作者所有，仅作为个人学习、研究以及欣赏！如有涉及下载请24小时内删除；
二、本站分享的图片、资源、视频等，出镜模特均为成年女性正常写真内容，均不含有淫秽以及色情内容;
三、用户可通过签到得积分来获取所需要的资源，本站VIP为赞助服务，是您喜欢本站而产生的捐赠赞助支持行为，仅为维持服务器及人员的开支与维护

WordPress上下滚动公告html代码

示例

代码

html

评论(0)

提示：请文明发言取消回复

WordPress上下滚动公告html代码

示例

代码

html

评论(0)

提示：请文明发言 取消回复

相关文章

为你的WordPress网站文章添加最后更新日期

WordPress网站如何开启Memcached和Redis加速

来自N0tssss的简约自适应个人主页开源HTML源码模版

解决多个WordPress站点使用Memcached和Redis缓存插件数据冲突的问题

标签云

提示：请文明发言取消回复