html元素移动时颜色逐渐变深 css实现随鼠标移动div渐变色效果

HTML

复制代码代码如下:

CSS

复制代码代码如下:

body{

background:#ecf0f1;

}

.art{

width:400px;

margin:0px auto;

}

.box{

border-radius:30%;

width:200px;

height:200px;

border:1px solid #2c3e50;

padding:10px;

opacity:0.97;

}

.lvl1{

text-align:center;

line-height:200px;

}

.lvl1:hover{ background:#f1c40f;}

.lvl2:hover{ background:#f39c12;}

.lvl3:hover{ background:#e67e22;}

.lvl4:hover{ background:#d35400;}

.lvl5:hover{ background:#e74c3c;}

.lvl6:hover{ background:#c0392b;}

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