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

发布时间:2022-04-14 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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渐变色效果所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: