css实现随鼠标移动div渐变色效果

HTML

@H_126_5@@H_304_7@复制代码代码如下:
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; }

大家可运行一下代码就可以看到效果了

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！