HT ML
复制代码
代码如下:
<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: # e CF 0 F1 ;
}</p>
<p>.art{
width:400px;
m arg in:0px auto;
}</p>
<p>.box{
border-radius:30%;
width:200px;
h ei ght:200px;
border:1px solid #2c3e50;
padding:10px;
opac IT y: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;}
大家可运行一下代码就可以看到效果了
总结
以上是 为你收集整理的 css实现随鼠标移动div渐变色效果 全部内容，希望文章能够帮你解决 css实现随鼠标移动div渐变色效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于css实现随鼠标移动div渐变色效果的详细内容...