首页动效导航模块-B2主题美化

效果图：

附件放到网站根目录

鼠标悬浮可以自动切换，背景图片跟链接可以自行更改

以下代码放到后台-模块管理-自定义

<style>
    .puxin-widget-catGrid .bottomcat .big-item {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #000;
        position: relative;
        overflow: hidden;
    }

    .puxin-widget-catGrid .bottomcat .big-item:hover {
        display: block;
    }

    .puxin-widget-catGrid .bottomcat .big-item .item-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .5;
    }

    .puxin-widget-catGrid .bottomcat .big-item:hover .item-bg {
        display: none;
    }

    .puxin-widget-catGrid .bottomcat .big-item .item-warp {
        position: relative;
        color: #fff;
        text-align: center;
    }

    .puxin-widget-catGrid .bottomcat .big-item:hover .item-warp {
        padding: 30px;
        text-align: left;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }

    .datutext {
        color: #fff;
        font-size: 22px;
        margin: 0;
        flex: 1;
        position: relative;
        padding-bottom: 15px;
        margin-bottom: 10px;
    }

    .desc p {
        font-size: 13px;
    }

    .puxin-widget-catGrid .bottomcat .big-item:hover .item-warp .datutext:after {
        background: #fff;
        left: 0;
    }

    .puxin-widget-catGrid .bottomcat .big-item .item-warp .datutext:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 26%;
        width: 2em;
        height: 4px;
        background: none;
    }

    .puxin-widget-catGrid .bottomcat .big-item i {
        display: none;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 48px;
        height: 48px;
        background-image: url(/img/toRight.png);
        background-size: cover;
        z-index: 10;
        margin: 20px;
    }

    .puxin-widget-catGrid .bottomcat .big-item:hover i {
        display: block;
    }

    .puxin-widget-catGrid .bottomcat {}

    .puxin-widget-catGrid .bottomcat .small-item {
        height: 92px;
        display: block;
        background: #000;
        position: relative;
        overflow: hidden;
    }

    .puxin-widget-catGrid .bottomcat .small-item .title {
        display: block;
        position: relative;
        z-index: 10;
        text-align: center;
        line-height: 95px;
        color: #fff;
        font-size: 22px;
    }

    .puxin-widget-catGrid .bottomcat .small-item:hover .title {
        display: none;
    }

    .puxin-widget-catGrid .bottomcat .small-item .item-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .5;
    }

    .puxin-widget-catGrid .bottomcat .small-item:hover .item-bg {
        display: none;
    }

    .puxin-widget-catGrid .bottomcat .small-item .item-warp {
        align-items: center;
        z-index: 10;
        position: relative;
        height: 100%;
        transition: all .3s !important;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }

    .puxin-widget-catGrid .bottomcat .small-item:hover .item-warp {
        display: flex;
        padding: 0 15px;
    }

    .puxin-widget-catGrid .bottomcat .small-item .item-warp .datutext:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 2em;
        height: 4px;
        background: #fff;
    }

    .puxin-widget-catGrid .bottomcat .small-item .item-warp i {
        display: block;
        width: 48px;
        height: 48px;
        background-image: url(/img/toRight.png);
        background-size: cover;
    }

    .puxin-widget-catGrid {
        width: calc(100% + 16px);
    }

    .puxin-widget-catGrid .topCat .item {
        display: block;
        overflow: hidden;
        position: relative;
        line-height: 13px;
    }

    .puxin-widget-catGrid .topCat .item p {
        line-height: 20px;
    }

    .puxin-widget-catGrid .topCat .item .item-bg {
        transition: all .3s;
        background: #000;
        height: 100%;
    }

    .puxin-widget-catGrid .topCat .item:hover .item-bg {
        transform: translateY(-60%);
    }

    .puxin-widget-catGrid .topCat .item .item-bg img {
        height: 100%;
        opacity: .6;
    }

    .puxin-widget-catGrid .topCat .item:hover .item-bg {
        transform: translateY(-60%);
    }

    .wide-screen .row {
        margin-right: -10px;
        margin-left: -10px;
    }

    .puxin-widget-catGrid .topCat .item .item-warp {
        position: absolute;
        top: 45%;
        left: 0;
        width: 100%;
        text-align: center;
        transition: all .3s;
    }

    .puxin-widget-catGrid .topCat .item .item-warp .datutext:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 4px;
        width: 50px;
        top: 30px;
        background: none;
        transition: all .3s;
    }

    .puxin-widget-catGrid .topCat .item:hover .datutext:after {
        background: #fff;
    }

    .puxin-widget-catGrid .topCat .item .item-warp p {
        padding: 0 20px;
        color: #fff;
        line-height: 20px;
        font-size: 13px;
        letter-spacing: 1px;
    }

    .puxin-widget-catGrid .topCat .item .item-warp i {
        opacity: 0;
        display: block;
        width: 56px;
        height: 56px;
        margin: 0 auto;
        margin-top: 20px;
        background: url(/img/toRight.png);
        transition: all .3s;
    }

    .postlist-img-warp .item img,
    .entry-media img {
        margin: 0 auto;
        overflow: hidden;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        object-fit: cover;
    }

    .postlist-img-warp .left-thumb {
        width: 316px;
        height: 528px;
        overflow: hidden;
        margin-right: 20px;
        position: relative;
        margin-bottom: 20px;
    }

    .puxin-widget-catGrid .topCat .item:hover i {
        opacity: 1;
    }

    .btn-outline-dark:not(:disabled):not(.disabled).active,
    .btn-outline-dark:not(:disabled):not(.disabled):active,
    .show>.btn-outline-dark.dropdown-toggle,
    .go-send-email-code,
    .go-rest-password,
    .archive-filter-2 .current a,
    .archive-filter-2 a:hover,
    .pagination .current,
    .vipinfo-page,
    .btn-light:hover,
    .filters .dropdown-item.active,
    .filters .dropdown-item:active,
    .filters .dropdown-item:hover,
    .puxin-widget-catGrid .topCat .item,
    .puxin-widget-catGrid .bottomcat .small-item:hover,
    .btn-light,
    .puxin-widget-catGrid .bottomcat .big-item:hover {
        background-image: -webkit-linear-gradient(0deg, #ff3355 0%, #ff3355 100%);
        color: #fff;
    }

    #abcd1-circles.home-section-bottom .container .item {
        width: calc(25% - 40px);
    }

    .change-theme {
        display: flex;
        margin: 0 10px;
        align-items: center;
        float: left;
        margin-top: 6px;
    }

    .col-px-1 {
        flex: 0 0 calc(25% - 16px);
        width: calc(25% - 16px);
        margin-bottom: 0px;
        float: left;
        margin-right: 16px;
    }

    .col-px-1a {
        flex: 0 0 calc(25% - 16px);
        width: calc(25% - 16px);
        float: left;
        position: relative;
        margin-right: 16px;
    }

    .col-px-2 {
        flex: 0 0 calc(25% - 16px);
        width: calc(25% - 16px);
        margin-bottom: 0px;
        float: left;
        margin-right: 16px;
    }

    .puxin-widget-catGrid .bottomcat .big-item,
    .puxin-widget-catGrid .bottomcat .small-item {
        margin-top: 16px;
    }

    .col-sm-6 {
        width: calc(25% - 16px);
    }

    .puxin-widget-catGrid .bottomcat .big-item {
        height: 200px;
    }
</style>
<div id="home-row-fenlei" class="  home_row home_row_1  module-qukuai  " style="background-color:;">
    <div class="wrapper">
        <div class="home-row-left content-area ">
            <section class="puxin-widget-catGrid">

                <div class="topCat row">
                    <div class="col-px-1a">
                        <a class="item b2-radius" href="https://west2.cn/flgma%e7%b4%a0%e6%9d%90" target="_blank">
                            <div class="item-bg"><img src="/img/1.jpg"></div>
                            <div class="item-warp">
                                <div class="datutext">gm素材 </div>
                                <p></p>
                                <i></i>
                            </div>
                        </a>
                    </div>
                    <div class="col-px-1a">
                        <a class="item b2-radius" href="https://west2.cn/sketch%e7%b4%a0%e6%9d%90" target="_blank">
                            <div class="item-bg"><img src="/img/2.jpg"></div>
                            <div class="item-warp">
                                <div class="datutext">ch素材 </div>
                                <p></p>
                                <i></i>
                            </div>
                        </a>
                    </div>
                    <div class="col-px-1a">
                        <a class="item b2-radius" href="https://west2.cn/ui-kit" target="_blank">
                            <div class="item-bg"><img src="/img/3.jpg"></div>
                            <div class="item-warp">
                                <div class="datutext">UI</div>
                                <p></p>
                                <i></i>
                            </div>
                        </a>
                    </div>
                    <div class="col-px-1a">
                        <a class="item b2-radius" href="https://west2.cn/xd%e7%b4%a0%e6%9d%90" target="_blank">
                            <div class="item-bg"><img src="/img/4.jpg"></div>
                            <div class="item-warp">
                                <div class="datutext">XD素材 </div>
                                <p></p>
                                <i></i>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="bottomcat">
                    <div class="row" style="margin-top: 0px;">
                        <div class="col-px-2">
                            <a class="small-item b2-radius" href="https://west2.cn/mfff" target="_blank">
                                <div class="title">免费素材</div>
                                <div class="item-bg"><img src="/img/5.jpg"></div>
                                <div class="item-warp">
                                    <div class="datutext">免费素材</div>
                                    <i></i>
                                </div>
                            </a>
                            <a class="small-item b2-radius" href="https://west2.cn/%e5%9b%be%e6%a0%87" target="_blank">
                                <div class="title">图标</div>
                                <div class="item-bg"><img src="/img/6.jpg"></div>
                                <div class="item-warp">
                                    <div class="datutext">图标</div>
                                    <i></i>
                                </div>
                            </a>
                        </div>
                        <div class="col-px-1">
                            <a class="big-item b2-radius" href="https://west2.cn/%e5%ad%97%e4%bd%93" target="_blank">
                                <div class="item-bg"><img src="/img/7.jpg"></div>
                                <div class="item-warp">
                                    <div class="datutext">字体</div>
                                    <div class="desc"></div>
                                </div>
                                <i></i>
                            </a>
                        </div>
                        <div class="col-px-1">
                            <a class="big-item b2-radius" href="https://west2.cn/%e6%8f%92%e7%94%bb" target="_blank">
                                <div class="item-bg"><img src="/img/8.jpg"></div>
                                <div class="item-warp">
                                    <div class="datutext">插画</div>
                                    <div class="desc"></div>
                                </div>
                                <i></i>
                            </a>
                        </div>
                        <div class="col-px-2">
                            <a class="small-item b2-radius" href="https://west2.cn/%e6%a0%b7%e6%9c%ba%e4%b8%8b%e8%bd%bd" target="_blank">
                                <div class="title">样机下载</div>
                                <div class="item-bg"><img src="/img/9.jpg"></div>
                                <div class="item-warp">
                                    <div class="datutext">样机下载</div>
                                    <i></i>
                                </div>
                            </a>
                            <a class="small-item b2-radius" href="https://west2.cn/%e8%ae%be%e8%ae%a1%e5%b7%a5%e5%85%b7" target="_blank">
                                <div class="title">设计工具</div>
                                <div class="item-bg"><img src="/img/10.jpg"></div>
                                <div class="item-warp">
                                    <div class="datutext">设计工具</div>
                                    <i></i>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>