欢迎光临
我们一直在努力

给Emlog WordPress Zblog程序侧边栏添加滚动播报小工具

给Emlog WordPress Zblog程序侧边栏添加滚动播报小工具-1

其实很简单,就一段代码!只需在后台—>外观—>小工具—>自定义HTML添加下面的代码,把它放在合适的位置(本站放在侧边栏),然后就可以啦。

<section   class="widget_text widget widget_custom_html mar16-b">
  <meta charset="utf-8">
  <!--<p     class="widget-title l1 box-header">欢迎访问清风博客</p>-->
  <div class="textwidget custom-html-widget">
    <aside     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
          }

          #flip-box-1 {
            overflow: hidden;
            height: 50px
          }

          #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-color: #FF7E40
          }

          .flip-box-1-2 {
            background-color: #C166FF
          }

          .flip-box-1-3 {
            background-color: #737373
          }

          .flip-box-1-4 {
            background-color: #4ec7f3
          }

          .flip-box-1-5 {
            background-color: #42c58a
          }

          .flip-box-1-6 {
            background-color: #F1617D
          }

          @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: 0px
            }

            99.996% {
              margin-top: 0px
            }

            100% {
              margin-top: 300px
            }
          }
        </style>
        <div id="container-box-1">
          <div class="container-box-1-1">欢迎来到Q云资源网</div>
          <div id="flip-box-1">
            <div>
              <div class="flip-box-1-1">技术教程!</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">只要你想要的我都有!</div>
        </div>
      </div>
      <div class="clear"></div>
    </aside>
  </div>
</section>
赞(0)
未经允许不得转载:桔子博客 » 给Emlog WordPress Zblog程序侧边栏添加滚动播报小工具
分享到: 更多 (0)

相关推荐

  • 暂无文章

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址