具体效果如下，实现起来其实也挺容易的。

1、css

aside.sidebar nav{height:250px;overflow:hidden}aside nav ul{list-style-type:none;text-align:center;display:flex;flex-wrap:wrap;gap:0}aside nav ul li{margin-right:2px;margin-bottom:2px}aside nav ul li{width:calc(33.333% - 2px * 2 / 3);line-height:124px;height:124px}aside nav ul li:nth-child(3n){margin-right:0}aside nav ul li.ab{background:#71a532}aside nav ul li.sy{background:#f90}aside nav ul li.js{background:#8c49ad}aside nav ul li.msh{background:#e7769e}aside nav ul li.xc{background:#a98659}aside nav ul li.ly{background:#63a8e8}aside nav ul li.ab a:hover{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);background:#666;-webkit-transition:all 1s;transition:all 1s}aside nav ul li.sy a:hover{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);background:#f60;-webkit-transition:all 1s;transition:all 1s}aside nav ul li.js a:hover{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);background:#66c;-webkit-transition:all 1s;transition:all 1s}aside nav ul li.msh a:hover{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);background:#f66;-webkit-transition:all 1s;transition:all 1s}aside nav ul li.xc a:hover{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);background:#c93;-webkit-transition:all 1s;transition:all 1s}aside nav ul li.ly a:hover{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);background:#06c;-webkit-transition:all 1s;transition:all 1s}aside nav ul li a{display:block;color:#fff;text-decoration:none;font-size:16px;height:100%;transition:all .3s ease}aside nav ul li a:hover{font-weight:700;color:#ff0;transform:scale(1.05);box-shadow:0 0 15px rgba(255,255,0,.5)}aside.sidebar nav ul:after,aside.sidebar nav ul:before{display:none;content:none}

2、Html

</p>
<nav>
<ul class="ulcustom">
<li class="ab"><a href="https://v.dedewp.com/" target="_blank" rel="follow no noopener">获取本主题</a></li>
<li class="sy"><a href="https://dedewp.com/21475.html" target="_blank" rel="follow no noopener">Ai客服</a></li>
<li class="js"><a href="https://dedewp.com/21427.html" target="_blank" rel="follow no noopener">广告位4</a></li>
<li class="msh"><a href="#" target="_blank" rel="follow no noopener">广告位5</a></li>
<li class="xc"><a href="https://dedewp.com/21446.html" target="_blank" rel="follow no noopener">淘宝客插件</a></li>
<li class="ly"><a href="https://dedewp.com/wpall/wpplugins" target="_blank" rel="follow no noopener">更多插件</a></li>
</ul>
</nav>
<p>

转载请注明：小雨科技 _武汉网站建设_武汉小程序搭建 » wordpress实现炫酷的六宫格侧边栏