一个网页底部装饰代码

[XSJYA]

效果图：

直接上代码：

<div class="footer-perch"> <div id="footer-animal"> <div class="animal-wall"></div> <img class="animal entered loaded" src="动物图片地址" alt="动物" data-ll-status="loaded"> </div></div>

动物图片(右键保存)：

/* 底部元素布局 */
#footer-banner {
    order: 999;
}

.footer-perch {
    height: 10px;
    display: flex;
    flex-direction: column;
    order: 1;
}

#footer-animal {
    position: relative;
    width: 100%;
    margin-top: auto;
    top: 1rem;
}

#footer-animal .animal-wall {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    background: #bcb0a4 url(背景墙地址) repeat center;
    background-size: auto 100%;
    box-shadow: 0 4px 7px rgba(0, 0, 0, .15);
}

@media screen and (max-width: 1023px) {
    #footer-animal .animal-wall {
        height: min(36px, 4vw);
    }
}

#footer-animal img.animal {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(500px, 100vw);
    display: block;
}

/* 去除多余的 !important */
#footer-bar {
    margin-top: 0;
}

背景墙图片 (右键保存)：

可能不适用所有网站 自己根据实际来调整吧

演示站：https://www.wnooo.cn 滑倒底部看效果

防止图片失效 图片建议自己放到本地使用

[XSJYA]

发帖才发现这个编辑器是md 挺好用的

[huangjie]

@XSJYA 在 一个网页底部装饰代码 中说：

发帖才发现这个编辑器是md 挺好用的

感谢分享！确实这个编辑器输出内容很舒服

[huangjie]

已经在本站加上了 哈哈