【B2主题美化】首页六格卡片菜单二次元背景区块

但是！曾经有一个非常棒的网站摆在我面前我没有珍惜。等这个网站404的时候我才后悔莫及，人世间最痛苦的事莫过于此。为了不错过，那就扒！

这款区块和之前类似，喜欢二次元风格的不要错过

[wm_yellow]效果[/wm_yellow]

[wm_yellow]后台新建模块自定义代码：[/wm_yellow]

<div id="home-row-erciyaun_aa" class=" mobile-hidden home_row home_row_12  module-html  "                    
    style="background-color:;">                     <div class="wrapper">                         <div
            class="home-row-left content-area ">                             <div id="html-box-erciyaun_aa"
                class="html-box">                                 <style>
                    .Mrxu-block {
                        padding-top: 0px;
                        position: relative;
                    }

                    .Mrxu-block .cut-prev,
                    .Mrxu-block .cut-next {
                        position: absolute;
                        font-size: 14px;
                        top: 63px;
                        width: 35px;
                        height: 35px;
                        text-align: center;
                        line-height: 35px;
                        color: #CCCCCC;
                        background: #F3F4F7;
                        border-radius: 50%;
                        cursor: pointer;
                    }

                    .Mrxu-block .cut-prev {
                        display: none;
                        left: -55px;
                    }

                    .Mrxu-block .cut-next {
                        right: -55px;
                    }

                    .Mrxu-block .cut-prev:hover,
                    .Mrxu-block .cut-next:hover {
                        color: #39AEFF;
                        background: #F3F4F7;
                    }

                    .Mrxu-circulation {
                        height: 197px;
                        overflow: hidden;
                        padding: 5px 5px;
                    }

                    .Mrxu-circulation ul {
                        width: 300%;
                    }

                    .Mrxu-circulation ul li {
                        float: left;
                        position: relative;
                        width: 5%;
                        height: 100px;
                        margin-right: 26px;
                        z-index: 3;
                    }

                    .Mrxu-circulation ul li .Mrxu-content::before {
                        content: '';
                        position: absolute;
                        right: 0;
                        top: 0;
                        width: 168px;
                        height: 100px;
                    }

                    .Mrxu-circulation ul li .Mrxu-content {
                        position: relative;
                        height: 100px;
                        font-size: 14px;
                        border-radius: 5px;
                        transition: 0.2s;
                        overflow: hidden;
                    }

                    .Mrxu-content .Mrxu-top {
                        display: block;
                        position: relative;
                        box-sizing: border-box;
                        padding: 22px 0 0 16px;
                        border-radius: 5px;
                        overflow: hidden;
                        height: 100px;
                    }

                    .Mrxu-name {
                        position: relative;
                        font-size: 26px;
                        line-height: 26px;
                        margin-bottom: 8px;
                        z-index: 1;
                    }

                    .Mrxu-hint {
                        position: relative;
                        z-index: 1;
                        text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
                        background: linear-gradient(to right, #ffffffa6, #fefefd00);
                        margin-left: -18px;
                    }

                    .Mrxu-circulation ul li.off:hover .Mrxu-content {
                        height: 100px;
                    }

                    .Mrxu-circulation ul li:hover .Mrxu-content {
                        height: 180px;
                        box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.10);
                    }

                    .Mrxu-circulation .color1 .Mrxu-content {
                        background: #fee7e7;
                        -moz-box-shadow: 0px 2px 5px #7a7a7a45;
                        -webkit-box-shadow: 0px 2px 5px #7a7a7a45;
                    }

                    .Mrxu-circulation .color1 .Mrxu-top {
                        color: #ff94b2;
                    }

                    .Mrxu-circulation .color1 .Mrxu-name {
                        color: #fff;
                        font-weight: 900;
                        text-shadow: 5px 5px 5px #ff00238c;
                    }

                    .Mrxu-circulation li.color1 .Mrxu-content::before {
                        background-position: 0 -100px;
                    }

                    .Mrxu-circulation .color2 .Mrxu-content {
                        background: #C9F1ED;
                        -moz-box-shadow: 0px 2px 5px #7a7a7a45;
                        -webkit-box-shadow: 0px 2px 5px #7a7a7a45;
                    }

                    .Mrxu-circulation .color2 .Mrxu-top {
                        color: #87BAB5;
                    }

                    .Mrxu-circulation .color2 .Mrxu-name {
                        color: #fff;
                        font-weight: 900;
                        text-shadow: 5px 5px 5px #1dab9d;
                    }

                    .Mrxu-circulation li.color2 .Mrxu-content::before {
                        background-position: -178px -100px;
                    }

                    .Mrxu-circulation .color3 .Mrxu-content {
                        background: #FFECB4;
                        -moz-box-shadow: 0px 2px 5px #7a7a7a45;
                        -webkit-box-shadow: 0px 2px 5px #7a7a7a45;
                    }

                    .Mrxu-circulation .color3 .Mrxu-top {
                        color: #DEBD83;
                    }

                    .Mrxu-circulation .color3 .Mrxu-name {
                        color: #fff;
                        font-weight: 900;
                        text-shadow: 5px 5px 5px #ffa500;
                    }

                    .Mrxu-circulation li.color3 .Mrxu-content::before {
                        background-position: -534px -100px;
                    }

                    .Mrxu-circulation .color4 .Mrxu-content {
                        background: #FFD4D4;
                        -moz-box-shadow: 0px 2px 5px #7a7a7a45;
                        -webkit-box-shadow: 0px 2px 5px #7a7a7a45;
                    }

                    .Mrxu-circulation .color4 .Mrxu-top {
                        color: #BD7C7C;
                    }

                    .Mrxu-circulation .color4 .Mrxu-name {
                        color: #fff;
                        font-weight: 900;
                        text-shadow: 5px 5px 5px #ff00238c;
                    }

                    .Mrxu-circulation li.color4 .Mrxu-content::before {
                        background-position: -1424px -100px;
                    }

                    .Mrxu-circulation .color5 .Mrxu-content {
                        background: #e6f2ff;
                        -moz-box-shadow: 0px 2px 5px #7a7a7a45;
                        -webkit-box-shadow: 0px 2px 5px #7a7a7a45;
                        /*animation: glow 800ms ease-out infinite alternate;*/
                    }

                    .Mrxu-circulation .color5 .Mrxu-top {
                        color: #8eb1ff;
                    }

                    .Mrxu-circulation .color5 .Mrxu-name {
                        color: #fff;
                        font-weight: 900;
                        text-shadow: 5px 5px 5px #4eadff;
                    }

                    .Mrxu-circulation li.color5 .Mrxu-content::before {
                        background-position: -712px -100px;
                    }

                    .Mrxu-circulation .color6 .Mrxu-content {
                        background: #FFE2D0;
                        -moz-box-shadow: 0px 2px 5px #7a7a7a45;
                        -webkit-box-shadow: 0px 2px 5px #7a7a7a45;
                    }

                    .Mrxu-circulation .color6 .Mrxu-top {
                        color: #ff9a83;
                    }

                    .Mrxu-circulation .color6 .Mrxu-name {
                        color: #fff;
                        font-weight: 900;
                        text-shadow: 5px 5px 5px #ff8100;
                    }

                    .Mrxu-circulation li.color6 .Mrxu-content::before {
                        background-position: -890px -100px;
                    }

                    .Mrxu-content .Mrxu-top i {
                        position: absolute;
                        top: 0;
                        right: -20px;
                        width: 130px;
                        height: 100px;
                        background: url(static/images/53619259d6810.png) no-repeat 0 0;
                    }

                    .Mrxu-circulation li .icon1 {
                        background-position: 0px 0;
                    }

                    .Mrxu-circulation li .icon2 {
                        background-position: -140px 0;
                    }

                    .Mrxu-circulation li .icon3 {
                        background-position: -280px 0;
                    }

                    .Mrxu-circulation li .icon4 {
                        background-position: -410px 0;
                    }

                    .Mrxu-circulation li .icon5 {
                        background-position: -530px 0;
                    }

                    .Mrxu-circulation li .icon6 {
                        background-position: -650px 0;
                    }

                    .Mrxu-block .Mrxu-content {
                        height: 100px;
                    }

                    .Mrxu-block .Mrxu-link {
                        text-align: center;
                        line-height: 26px;
                        font-size: 14px;
                    }

                    .Mrxu-block .Mrxu-link a {
                        margin: 10px 5px 0;
                        display: inline-block;
                        background: rgba(255, 255, 255, 0.50);
                        width: 77px;
                        height: 26px;
                        border-radius: 6px;
                        font-size: 13px;
                        color: #842100;
                    }

                    .Mrxu-block .Mrxu-link a:hover {
                        background: #fff;
                        color: #666;
                    }
                </style>                                 <div class="Mrxu-block">                                    
                    <div class="Mrxu-circulation">                                         <ul>                        
                                                <li class="color1">                                                 <div
                                    class="Mrxu-content">                                                     <a
                                        class="Mrxu-top" href="#">                                                      
                                          <p class="Mrxu-name">软件</p>                                                  
                                              <p class="Mrxu-hint">&nbsp;&nbsp;&nbsp;&nbsp;不一样的乐趣</p> <i                
                                                                                        class="icon1"></i>              
                                                                              </a>                                      
                                                  <div class="Mrxu-link"> <a href="/yz_rj">前往乐园</a>                    
                                                                        </div>                                          
                                          </div>                                             </li>                      
                                                  <li class="color2">                                                
                                <div class="Mrxu-content">                                                     <a
                                        class="Mrxu-top" href="#">                                                      
                                          <p class="Mrxu-name">系统</p>                                                  
                                              <p class="Mrxu-hint"> &nbsp;&nbsp;&nbsp;&nbsp;美妙的系统</p> <i                
                                                                                        class="icon2"></i>              
                                                                              </a>                                      
                                                  <div class="Mrxu-link"> <a href="/xt_sat">前去探索</a>                    
                                                                        </div>                                          
                                          </div>                                            
                            </li>                      
                                                  <li class="color3">                                                
                                <div class="Mrxu-content">                                                     <a
                                        class="Mrxu-top" href="#">                                                      
                                          <p class="Mrxu-name">帮助</p>                                                  
                                              <p class="Mrxu-hint"> &nbsp;&nbsp;&nbsp;&nbsp;站点帮助</p> <i                
                                                                                        class="icon3"></i>              
                                                                              </a>                                      
                                                  <div class="Mrxu-link"> <a href="/document">点我前往</a>                  
                                                                          </div>                                        
                                            </div>                                            
                            </li>                    
                                                    <li class="color4">                                                
                                <div class="Mrxu-content">                                                     <a
                                        class="Mrxu-top" href="#">                                                      
                                          <p class="Mrxu-name">教程</p>                                                  
                                              <p class="Mrxu-hint"> &nbsp;&nbsp;&nbsp;&nbsp; 优质教程</p> <i                
                                                                                        class="icon4"></i>              
                                                                              </a>                                      
                                                  <div class="Mrxu-link"> <a href="/muyujc">源教程站</a>                    
                                                                        </div>                                          
                                          </div>                                            
                            </li>                      
                                                  <li class="color5">                                                
                                <div class="Mrxu-content">                                                     <a
                                        class="Mrxu-top" href="#">                                                      
                                          <p class="Mrxu-name">Android</p>                                              
                                                  <p class="Mrxu-hint"> &nbsp;&nbsp;&nbsp;&nbsp; 安卓世界</p> <i            
                                                                                            class="icon5"></i>          
                                                                                  </a>                                  
                                                      <div class="Mrxu-link"> <a href="/ad_roid">立即前往</a>              
                                                                                  <a
                                            href="https://momeis.net/4442.html">WPS Office</a>                          
                                                                      <a href="https://momeis.net/3859.html">李跳跳</a>    
                                                                                            <a
                                            href="https://momeis.net/2909.html">文件浏览器</a>                              
                                                             
                                    </div>                                                
                                </div>                                            
                            </li>                                
                                        <li class="color6">                                                
                                <div class="Mrxu-content">                                                    
                                    <a class="Mrxu-top" href="#">                                                      
                                          <p class="Mrxu-name">站长自用</p>                                                
                                                <p class="Mrxu-hint"> &nbsp;&nbsp;&nbsp;&nbsp;解锁新视点</p> <i              
                                                                                          class="icon6"></i>            
                                                                                </a>                                    
                                                    <div class="Mrxu-link"> <a href="/zz_zys">前往探索</a>                  
                                                                              <a
                                            href="https://momeis.net/4688.html">Geek卸载</a>                              
                                                                  <a href="https://momeis.net/4307.html">桌面时钟</a>      
                                                                                          <a
                                            href="https://momeis.net/3599.html">Beyond</a>                              
                                    </div>                                                
                                </div>
                            </li>                                
                        </ul>
                    </div>                                
                </div>                                            
            </div>
        </div>
    </div>
</div>

[wm_red]css 文件自行下载，自行引用按需修改[/wm_red]