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

這篇文章主要講解了“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;}

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

感謝各位的閱讀，以上就是“css怎么實現隨鼠標移動div漸變色效果”的內容了，經過本文的學習后，相信大家對css怎么實現隨鼠標移動div漸變色效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！