7b2美化-手机菜单页底部添加滚动播报
以下代码放到b2/Modules/Templates/Header.php
搜索
代码语言：javascript复制<div class="mobile-show">'.self::logo().'</div>下面’.$html.’的下方放入以下代码
示例
<section class="gdpcyc"><div class="textwidget"><aside data-wow-delay="0.3s"><div class="textwidget"><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="container-box-1-2">你好我也好，不要忘记哦 !</div></div></div></aside></div></section>以下代码放入css样式
代码语言：javascript复制.gdpcyc{
display:none;
}
@media screen and (max-width: 768px){
.gdpcyc{
display:block;
}
#container-box-1 {
color: #526372;
text-transform: uppercase;
width: 100%;
font-size: 16px;
line-height: 40px;
text-align: center
}
#flip-box-1 {
overflow: hidden;
height: 40px
}
#flip-box-1 div {
height: 50px
}
#flip-box-1>div>div {
display: inline-block;
text-align: center;
height: 40px;
width: 100%
}
#flip-box-1
div:first-child {
animation: show 8s linear infinite
}
@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
}
}
}如果不显示请清空缓存后查看
本文来自：小狐狸资源网
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
