今天小编跟大家讲解下有关css实现随鼠标移动div渐变色效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css实现随鼠标移动div渐变色效果 的相关资料，希望小伙伴们看了有所帮助。
HTML
复制代码代码如下:<div class="art"><div class="box lvl6"><div class="box lvl5"><div class="box lvl4"><div class="box lvl3"><div class="box lvl3"><div class="box lvl3"><div class="box lvl2"><div class="box lvl2"><div class="box lvl2"><div class="box lvl2"><div class="box lvl1"><div class="box lvl1"><div class="box lvl1"><div class="box lvl1"><div class="box lvl1"><div class="box lvl1"><div class="box lvl1"> <div class="box lvl1"><div class="box lvl1"><div class="box lvl1"><div class="box lvl1"><div class="box lvl1"><div class="box lvl1"><div class="box lvl1"><div class="box lvl1"><div class="box lvl1"><div class="box lvl1"><div class="box lvl1"><div class="box lvl1"><div class="box lvl1"><div class="box lvl1"><div class="box lvl1"><div class="box lvl1"><div class="box lvl1"><div class="box lvl1"> </div></div></div></div></div></div></div>
CSS
复制代码代码如下:body{ background:#ecf0f1;}</p><p>.art{ width:400px; margin:0px auto;}</p><p>.box{ border-radius:30%; width:200px; height:200px; border:1px solid #2c3e50; padding:10px; opacity:0.97;}</p><p>.lvl1{ text-align:center; line-height:200px;}</p><p>.lvl1:hover{ background:#f1c40f;}.lvl2:hover{ background:#f39c12;}.lvl3:hover{ background:#e67e22;}.lvl4:hover{ background:#d35400;}.lvl5:hover{ background:#e74c3c;}.lvl6:hover{ background:#c0392b;}
大家可运行一下代码就可以看到效果了
来源：爱蒂网
