森鹿语网站底部滚动式图片美化代码分享

近日，在浏览森鹿语及其二次元网站时，被其底部滚动的图片所吸引。经过一番探索12开发者工具真是神器！），成功提取了相关代码。现将这段代码分享给大家，希望你们也会喜欢！如有侵权，请通过微信（Taoqimao20）联系我进行删除。

效果预览

HTML代码

请将以下HTML代码放置在合适的位置，以实现底部滚动图片的效果：

<!-- 底部滚动 -->
<div id="jitheme_home_15_lbtuysjia">
    <div class="home_row">
        <div class="wrapper">
            <div class="home-row-left fa3795 content-area">
                <div class="">
                    <div id="html-box-lbtuysjia" class="html-box">
                        <div id="html-box-head1" class="html-box">
                            <div class="toptu">
                                <div class="item scroll">
                                    <img class="scroll-image lazyloaded" src="https://tu.fxyoy.com/yoy.jpg" data-was-processed="true">
                                    <img class="scroll-image lazyloaded" src="https://tu.fxyoy.com/yoy.jpg" data-was-processed="true">
                                    <div class="sc-1wssj0-17 hVBrzU">
                                        <img src="https://tu.fxyoy.com/yoyo.png" class="lazyloaded" data-was-processed="true">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS代码

紧接着，添加以下CSS代码以确保滚动效果正常显示：

<style type="text/css">
    .home_row {
        margin-top: 16px;
    }

    .home_row_0 {
        margin-top: 3px;
    }

    .home_row_0 .wrapper, 
    .home_row_0 .wrapper .box {
        width: 100% !important;
        box-shadow: none;
    }

    .box {
        box-shadow: none;
    }

    .lazy {
        opacity: 1;
    }

    .sc-1wssj0-17 img {
        width: auto;
    }
    /* Horizontal scroll styles start */
    .item.scroll {
        left: 0px;
        width: 100%;        height: 260px        background-size: auto 100%;
        pointer-events: none;
        background-position: center center;
        background-repeat: no-repeat        transition: opacity 0s ease 0s;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        font-size: 0;
        background: #000;
        word-wrap: break-word;
        box-sizing: border-box;
        outline: none;
    }

    .item.scroll .scroll-image {
        position: relative;
        height: 100%;
        transform: translateX(0px);
        animation: banner 40s linear infinite;
        opacity: 0.4;
        border: 0;
        -ms-interpolation-mode: bicubic;
        vertical-align: middle;
    }

    .hVBrzU {
        position: absolute;
        top: 70px;
        left: 0px;
        right: 0px;
        text-align: center;
        font-size: 16px;
        white-space: normal;
        width: 100%;
        margin: auto;
    }

    .statics {
        position: static;
        margin-top: -76px;
        padding-left: 16px;
        padding-right: 16px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }

    @media (max-px) {
        .static, 
        .home-course, 
        .home-subjects {
            display: none;
        }
    }

    .statics .flex {
        padding: 0;
        margin: 0;
        display: flex;
    }
    .statics li.st_one {
        flex: 1;
        margin-right: 10px;
        border-radius: 6px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
        list-style: none;
        transition: all .3s ease-out;
    }

    .statics li.st_one:hover {
        transform: translateY(5px);
    }
    .statics li.st_one:last-child {
        margin-right: 0;
    }

    .statics .st_one .card-main {        width: 100%;
    }

    .statics .active-card-title {
        position: absolute;
        bottom: 0;
        color: #fff;
        background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, .7)), to(transparent));
        width: 100%;        padding: 12px 20px;        font-size: 16px;
        margin: 0;
    }

    @media screen and (max-width: 900px) {
        .item.scroll {
            height: 200px;
            margin-top: 0;
        }
    }

    .sc-1wssj0-17 img {
        display: inline-block;
    }

    @-webkit-keyframes banner {
        from {
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }
        to {
            -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
            transform: translateX(-100%);
        }
    }

    @keyframes banner {
        from {
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }
        to {
            -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
            transform: translateX(-100%);
        }
    }

    .item img {
: inline-block;
        height: auto;
        max-width: 100%;
        vertical-align: middle;
    }
    /* Horizontal scroll styles end */
</style>

希望这段代码能为你的网站增添一抹亮色！如有任何问题或建议，欢迎随时交流。