子比主题美化 – 新版动物墙页脚美化(PC 移动已适配)

前言

在刷博客的时候看到一款很好看的页脚就扒下来了。因为原来使用的页脚太花了，也有点css冲突的小问题。于是准备换掉，在上周看到其他网站的页脚不错，扒下来后修改了一些就放弃了。今天发一下本站新版页脚，带有动物墙的页脚。扒下来的时候移动端适配不是特别好，PC端的文字也有点不太舒服，就全部修改掉了。这款页脚有个比较有意思的地方就是鼠标移入右侧图片上会显示原版色彩。点击箭头动态效果会返回页面顶部

效果图

PC端

移动端

教程开始

进入网站目录/wp-content/themes/zibll/footer.php文件，替换为下面代码，其中的css位置可自行替换，也可以使用内嵌式css。把link标签这一行修改为<style>css代码</style>

<?php
/*
 * @Author        : Qinver
 * @Url           : zibll.com
 * @Date          : 2020-09-29 13:18:36
 * @LastEditTime  : 2023-09-16 13:53:11
 * @Email         : 770349780@qq.com
 * @Project       : Zibll子比主题
 * @Description   : 一款极其优雅的Wordpress主题
 * @Read me       : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。
 * @Remind        : 使用盗版主题会存在各种未知风险。支持正版，从我做起！
 */
?>
<link rel="stylesheet" href="/wp-content/themes/zibll/css/mxbk_footer.css">
<div id="footer-animal">
    <div class="animal-wall"></div>
    <img class="animal entered loaded"
         src="/demo/footer_animal.avif"
         data-lazy-src="/demo/footer_animal.avif"
         alt="动物"
         data-ll-status="loaded">
</div>

<footer id="footer">
    <div id="footer-wrap">
        <div id="footer-left">
            <div class="footer-title">墨星博客・Moxingbk</div>
            <div class="wordcount">墨星博客致力于分享子比美化、技术教程与主题技巧的笔记空间。这里汇集了精选的代码片段、操作笔记与实用资源，为你的建站与数字生活提供灵感与便利。</div>
        </div>
        <div id="footer-right">
            <p>数据库查询：<?php echo get_num_queries(); ?>次 页面加载耗时<?php timer_stop(3); ?> 秒</p>
            <div class="footer-totop">
                <a href="javascript:(scrollTopTo());"><i class="fa fa-chevron-up"></i></a>
            </div>
            <div class="footer-info">
                <a href="https://beian.miit.gov.cn/"><span class="mx-p">ICP | 公安网备 xxx</span></a>
            </div>
            <div class="footer-service">
                <a title="子比主题" target="_blank" rel="noopener external nofollow noreferrer" href="https://www.zibll.com/?ref=21618"><img alt="子比主题" src="/wp-content/themes/zibll/img/logo.png"></a>
                <a title="宝塔" target="_blank" rel="noopener external nofollow noreferrer"><img alt="宝塔" src="/demo/bt.svg"></a>
                <a title="图酷" href="https://three.tucool.cn/certificate?cert_id=5" rel="noopener external nofollow noreferrer"><img alt="图酷" src="https://www.tucool.cn/img/tuc-badge.png"></a>
            </div>
        </div>
    </div>
</footer>

<?php wp_footer(); ?>
</body>
</html>

css代码部分

其中的图片素材自行替换即可

#footer-animal{position:relative;width:100%}#footer-animal .animal-wall{position:absolute;bottom:0;width:100%;height:36px;max-width:none;background:#bcb0a4 url(/demo/footer_wall.avif) repeat center;background-size:auto 100%;box-shadow:0 4px 7px rgba(0,0,0,.15)}#footer-animal img.animal{position:relative;max-width:min(974px,100%);margin:0 auto;display:block}#footer{position:relative;background:#e68282;background-attachment:scroll;background-position:bottom;background-size:cover}#footer-wrap{position:relative;padding:40px 20px;text-align:center}#footer-wrap{padding:50px 5% 35px 5%;display:flex;flex-wrap:wrap;position:relative}#footer-wrap > div{width:50%}#footer-left{text-align:left}.footer-title{font-size:30px;color:#fff}#footer-right{text-align:right;margin-top:auto}#footer-right p,#footer-right a{color:#fff}.footer-totop{position:absolute;top:20px;left:50%;transform:translateX(-50%)}.footer-totop i{font-size:2rem;animation:footerToTop 1.2s linear infinite;color:#fff}.footer-info a{margin-left:20px;transition:0.2s;text-decoration:none}.footer-info a:hover img{filter:none !important;transition:0.2s}.footer-service img{height:30px;filter:brightness(1000%);margin-left:20px;margin-top:10px;transition:0.2s}.footer-service img:hover{filter:brightness(100%);transition:0.2s}@keyframes footerToTop{0%{transform:translateY(0)}60%{transform:translateY(-25%)}100%{transform:translateY(0)}}@media screen and (max-width:768px){#footer-wrap > div{width:100%;text-align:center}.wordcount{margin:0 auto}}@media screen and (max-width:1023px){#footer-animal .animal-wall{height:4vw}.wordcount{width:100%;margin:10px 0;padding:0 5px;color:#F8F9F9;text-align:justify;text-align-last:center;line-height:1.6;box-sizing:border-box}}@media screen and (min-width:998px){.wordcount{width:70%}}.wordcount{color:#F8F9F9}

图片素材部分