最近大海牛一直在改进爱海牛的网站模板,无意间看到一个不错的翻页文本小工具,把代码找了一下用在了爱海牛上,感兴趣的朋友可以看下。
因为使用频率比较低,所有没有集成到主题中,使用小工具-文本的方式添加了翻箱文本效果。
效果图
添加方法
1、外观——小工具——文本
2、填写标题,把js和css代码按顺序都复制到文本内容中即可。注意:复制的时候,选择文本,如图2。
具体代码如下:
CSS样式代码
<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>
HTML样式美化
<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>