演示站点:

www.y-8.top

效果图:

代码:

<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 20s 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 id="flip-box-1"><div><div class="flip-box-1-1"><i class="fa fa-globe" aria-hidden="true"></i>  这个世界不会因为你而发生改变，那么，让我教你如何改变这个世界吧</div></div><div><div class="flip-box-1-2"><i class="fa fa-heart" aria-hidden="true"></i>  我们很年轻，但我们有信念、有梦想</div></div><div><div class="flip-box-1-3"><i class="fa fa-gratipay" aria-hidden="true"></i>  我们相聚在一起，聚集在真理者，只为心中的一个梦想</div></div><div><div class="flip-box-1-4"><i class="fa fa-drupal" aria-hidden="true"></i>  做这个世界的逆行者，先人一步看未来</div></div><div><div class="flip-box-1-5"><i class="fa fa-gitlab" aria-hidden="true"></i>  云共享，云交流，侠客行论坛在路上。</div></div><div><div class="flip-box-1-6"><i class="fa fa-moon-o" aria-hidden="true"></i>  侠客行论坛给你一个气氛优秀的技术圈子</div></div><div><div class="flip-box-1-1">不因何事去制作 只因兴趣而创造</div></div></div></div>

最简单的使用方法:

先下载一个xiuno插入代码插件

粘贴代码即可