实例演示
教学
以下代码放到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>Guducat.CN</span> 孤独豹猫的个人博客
<br>一个兴趣使然的网站
<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%;
}
}
/*代码结束*/