![图片[1]-wordpress自定义轮播显示问候语的代码-夏末浅笑](https://aliyun.ccswust.org/wp-content/uploads/2019/10/1571884080-006VCrUsgy1fmbpdu8ld3j30lo0dc75n.jpg)
代码部署
后台→外观→小工具→（你想显示的位置：比如侧边栏）杂志布局侧边栏→添加“增强文本”小工具，复制下面的代码粘贴进去OK
运行演示：
示例代码：
<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">坚持每天来逛逛，会让你</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="flip-box-1-1">工作也轻松了！</div>
</div>
</div>
<div class="container-box-1-2">你好我也好，不要忘记哦！</div>
</div>
暂无评论内容