css怎么實(shí)現(xiàn)隨鼠標(biāo)移動(dòng)div漸變色效果

這篇文章主要講解了“css怎么實(shí)現(xiàn)隨鼠標(biāo)移動(dòng)div漸變色效果”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“css怎么實(shí)現(xiàn)隨鼠標(biāo)移動(dòng)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;}

大家可運(yùn)行一下代碼就可以看到效果了

感謝各位的閱讀，以上就是“css怎么實(shí)現(xiàn)隨鼠標(biāo)移動(dòng)div漸變色效果”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)css怎么實(shí)現(xiàn)隨鼠標(biāo)移動(dòng)div漸變色效果這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！