7b2美化-手机菜单页底部添加滚动播报

以下代码放到b2/Modules/Templates/Header.php

搜索

<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样式

.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
	}
}
}

如果不显示请清空缓存后查看

本文来自：小狐狸资源网