css實現隨鼠標移動div漸變色效果

2024-07-11 08:27:55

字體：大中小

來源：轉載

供稿：網友

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;}

大家可運行一下代碼就可以看到效果了

上一篇：li在ie/firefox瀏覽器中行高不一致解決方法(瀏覽器兼容)

下一篇：元素浮動之后文字會環繞而不是重合原因示例解答