当前位置:奉上博客 » 站长之家 » 正文

7b2主题美化-底部内容简介+字母闪动效果

以下代码放到footer.php最上面

<footer id="colophon" class="footer">
	<div class="site-footer">
		<div class="wrapper">
			<div class="site-footer-widget-in">
				<section id="b2-widget-links-2" class="mobile-hidden widget b2-widget-links mg-b b2-radius">
					<div class="b2-widget-title">
						<h2 class="widget-title">关于本站</h2>
					</div>
					<div class="b2-widget-box">
						<ul class="links-widget">
							<li>
								<a target="__blank" class="link-block" href="/about"></a>
								<div class="links-icon">
									<img src="/icon/guanyuwomen.png" />
								</div>
								<div>
									<h2>关于我们</h2>
									<p>了解我们做站初衷</p>
								</div>
							</li>
							<li>
								<a target="__blank" class="link-block" href="/disclaimer"></a>
								<div class="links-icon">
									<img src="/icon/mianzeshengming.png" />
								</div>
								<div>
									<h2>免责声明</h2>
									<p>浏览前仔细阅读本站声明</p>
								</div>
							</li>
							<li>
								<a target="__blank" class="link-block" href="/user-agreement"></a>
								<div class="links-icon">
									<img src="/icon/yonghuxieyi.png" />
								</div>
								<div>
									<h2>用户协议</h2>
									<p>注册前仔细阅读本站协议</p>
								</div>
							</li>
							<li>
								<a target="__blank" class="link-block" href="/requests"></a>
								<div class="links-icon">
									<img src="/icon/jianyifankui.png" />
								</div>
								<div>
									<h2>提交建议</h2>
									<p>在线提交问题建议</p>
								</div>
							</li>
						</ul>
					</div>
				</section>
				<section id="b2-widget-links-3" class="mobile-hidden widget b2-widget-links mg-b b2-radius">
					<div class="b2-widget-title">
						<h2 class="widget-title">我的菜单</h2>
					</div>
					<div class="b2-widget-box">
						<ul class="links-widget">
							<li>
								<a target="__blank" class="link-block" href="/vips"></a>
								<div class="links-icon">
									<img src="/icon/VIP.png" />
								</div>
								<div>
									<h2>开通会员</h2>
									<p>开通会员享受更多权限资源</p>
								</div>
							</li>
							<li>
								<a target="__blank" class="link-block" href="/category/jf-feature"></a>
								<div class="links-icon">
									<img src="/icon/jifen.png" />
								</div>
								<div>
									<h2>积分专区</h2>
									<p>一大波积分资源下载</p>
								</div>
							</li>
							<li>
								<a target="__blank" class="link-block" href="/shop"></a>
								<div class="links-icon">
									<img src="/icon/gouwuche.png" />
								</div>
								<div>
									<h2>本站商城</h2>
									<p>查看本店的最新商品</p>
								</div>
							</li>
							<li>
								<a target="__blank" class="link-block" href="/ly"></a>
								<div class="links-icon">
									<img src="/icon/liuyan.png" />
								</div>
								<div>
									<h2>在线留言</h2>
									<p>既然都来了请留下您的脚印</p>
								</div>
							</li>
						</ul>
					</div>
				</section>
				<section id="b2-widget-links-4" class="mobile-hidden widget b2-widget-links mg-b b2-radius">
					<div class="b2-widget-title">
						<h2 class="widget-title">站长合作</h2>
					</div>
					<div class="b2-widget-box">
						<ul class="links-widget">
							<li>
								<a target="__blank" class="link-block" href="/sqlinks"></a>
								<div class="links-icon">
									<img src="/icon/lianjie.png" />
								</div>
								<div>
									<h2>申请友链</h2>
									<p>网站IT互联网相关链接交换</p>
								</div>
							</li>
							<li>
								<a target="__blank" class="link-block" href="/advertise"></a>
								<div class="links-icon">
									<img src="/icon/hezuo.png" />
								</div>
								<div>
									<h2>广告合作</h2>
									<p>广告服务欢迎投放共创双赢</p>
								</div>
							</li>
							<li>
								<a target="__blank" class="link-block" href="/write"></a>
								<div class="links-icon">
									<img src="/icon/wenzhang.png" />
								</div>
								<div>
									<h2>文章创作</h2>
									<p>提供优秀的文章创作与分享</p>
								</div>
							</li>
							<li>
								<a target="__blank" class="link-block" href="/distribution"></a>
								<div class="links-icon">
									<img src="/icon/tuiguang.png" />
								</div>
								<div>
									<h2>推广中心</h2>
									<p>推广分享文章链接获取收益</p>
								</div>
							</li>
						</ul>
					</div>
				</section>
				<section id="b2-widget-html-3" class="mobile-hidden widget b2-widget-html mg-b b2-radius">
					<div class="b2-widget-title">
						<h2 class="widget-title">关注我们</h2>
					</div>
					<div class="b2-widget-box">
						<div class="html-widget">
							<div class="html-widget-content">
								<div class="hg-yj">
									<p>
										<span>MUZIZ.CN</span> 奉上建站日记(www.muziz.cn)一个关注网络资源分享,建站技术教程经验,网站源码,技术教程,免费活动等精品资源的独立个人博客网站。
										<br>
										<br>
									</p>
								</div>
							</div>
						</div>
					</div>
				</section>
			</div>
		</div>
	</div>

以下代码放到css样式

/*底部字母闪动*/
 .hg-yj p span {
    font: 700 3.7em/1"Oswald", sans-serif;
    letter-spacing: 0;
    padding: .25em 0 .325em;
    display: block;
    margin: 0 auto;
    text-shadow: 0 0 80px rgb(255 255 255 / 50%);
    background: url(/icon/footer-logo-bg.png) repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: aitf 80s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
}
.hg-yj {
    text-align: center;
}
.hg-yj p {
    text-transform: uppercase;
    letter-spacing: .5em;
    display: inline-block;
}
/* Animate Background Image */
 @-webkit-keyframes aitf {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

https://www.muziz.cn/625.html

相关文章