其实很简单,就一段代码!只需在后台—>外观—>小工具—>自定义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
}
#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>