css实现随鼠标移动div渐变色效果

前端技术 2023/09/03 CSS

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

大家可运行一下代码就可以看到效果了

本文地址：https://www.stayed.cn/item/8696

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案