css實(shí)現(xiàn)隨鼠標(biāo)移動(dòng)div漸變色效果
發(fā)布時(shí)間：2013-12-18 16:12:19 作者：佚名 
我要評(píng)論
我要評(píng)論多組div排列著圈子，利用css的hover屬性產(chǎn)生色層漸變，只要拷貝一段很簡(jiǎn)單的html和css就可以實(shí)現(xiàn)
HTML
復(fù)制代碼
代碼如下:<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
復(fù)制代碼
代碼如下: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)行一下代碼就可以看到效果了
相關(guān)文章
純CSS制作菜單欄當(dāng)鼠標(biāo)經(jīng)過時(shí)會(huì)變色的
這篇文章主要介紹了使用CSS實(shí)現(xiàn)菜單欄的制作當(dāng)鼠標(biāo)經(jīng)過時(shí)有變色效果，個(gè)人感覺還是個(gè)不錯(cuò)的例子，希望對(duì)初學(xué)者有所幫助2014-04-14- 本文主要介紹了css控制div鼠標(biāo)放上去變色代碼實(shí)例，大家參考使用吧2014-01-06
- 這里應(yīng)該主要css順序:a:hover應(yīng)該放在最后2009-11-27
CSS 實(shí)現(xiàn)鼠標(biāo)放在上面時(shí)整行變色效果
這篇文章主要介紹了CSS 實(shí)現(xiàn)鼠標(biāo)放在上面時(shí)整行變色效果，本文給大家分享實(shí)現(xiàn)思路，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-10
