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

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

總結

以上是生活随笔為你收集整理的html元素移动时颜色逐渐变深,css实现随鼠标移动div渐变色效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。