子比主题美化-滚动播报小工具

设置：

在网站后台 -> 外观 -> 小工具 -> 自定义HTML， 在合适位置添加小工具，并在代码编辑框中添加以下代码：

<section id="custom_html-2" class="widget_text widget widget_custom_html mar16-b">
<meta charset="utf-8">
<!--<p  align="center"  class="widget-title l1 box-header">欢迎访问空白资源网</p>-->
<div class="textwidget custom-html-widget">
    <aside id="php_text-8" class="widget php_text wow fadeInUp" data-wow-delay="0.3s">
    <div class="textwidget widget-text">
        <style type="text/css">
            #container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px;line-height:50px;text-align:center;padding: 10px;background: linear-gradient(45deg, #C7F5FE 10%, #C7F5FE 40%, #FCC8F8 40%, #FCC8F8 60%, #EAB4F8 60%, #EAB4F8 65%, #F3F798 65%, #F3F798 90%);border-radius: var(--main-radius);}
            #flip-box-1{overflow:hidden;height:50px;border-radius:99px}
            #flip-box-1 div{height:50px}
            #flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%}
            #flip-box-1 div:first-child{animation:show 8s linear infinite}
            .flip-box-1-1{background-image:linear-gradient(to right,#fa709a 0,#fee140 100%)}
            .flip-box-1-2{background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);}
            .flip-box-1-3{background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);}
            .flip-box-1-4{background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);}
            .flip-box-1-5{background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);}
            .flip-box-1-6{background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);}
            @keyframes show{
                0%{margin-top:-300px}
                5%{margin-top:-250px}
                16.666%{margin-top:-250px}
                21.666%{margin-top:-200px}
                33.332%{margin-top:-200px}
                38.332%{margin-top:-150px}
                49.998%{margin-top:-150px}
                54.998%{margin-top:-100px}
                66.664%{margin-top:-100px}
                71.664%{margin-top:-50px}
                83.33%{margin-top:-50px}
                88.33%{margin-top:0}
                99.996%{margin-top:0}
                100%{margin-top:300px}
            }
        </style>
        <div id="container-box-1">
        <div class="container-box-1-1">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#iconxiangwenbiaoqing" rel="external nofollow" ></use>
            </svg> 
            坚持每天逛芝士站，会让你 
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#iconpaomeiyanbiaoqing" rel="external nofollow" ></use>
            </svg>
        </div>
        <div id="flip-box-1">
            <div>
                <div class="flip-box-1-1">
                    <a href="https://www.douyin.com/user/MS4wLjABAAAA0xN7mKPjoNVhSOJmYTVpoRHuvxwIRp9F8S8g9Lj8kXI?from_tab_name=main">
                    抖音推荐: 刺猬（限流破防
                    </a>
                </div>
            </div>
            <div>
                <div class="flip-box-1-2">
                    广告位招租
                </div>
            </div>
            <div>
                <div class="flip-box-1-3">
                    广告位招租
                </div>
            </div>
            <div>
                <div class="flip-box-1-4">
                    广告位招租
                </div>
            </div>
            <div>
                <div class="flip-box-1-5">
                    广告位招租
                </div>
            </div>
            <div>
                <div class="flip-box-1-6">
                    广告位招租
                </div>
            </div>
        </div>
        <div class="container-box-1-2">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#iconkaixinbiaoqing" rel="external nofollow" ></use>
            </svg> 
            充满知识，不要忘记哦! 
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icondaxiaobiaoqing" rel="external nofollow" ></use>
            </svg>
        </div>
        </div>
    </div>
    <div class="clear"></div>
    </aside>
</div>
</section>

效果图：

本文转载至：WordPress子比主题添加滚动播报小工具美化版