手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >css实现随鼠标移动div渐变色效果
css实现随鼠标移动div渐变色效果
摘要:HTMLCSSbody{background:#ecf0f1;}.art{width:400px;margin:0pxauto;}.box{...

HTML

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

<div>

</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渐变色效果】相关文章:

css3实现input输入框颜色渐变发光效果代码

实现链接的虚线下划线效果

利用CSS3实现毛玻璃效果示例源码

CSS+DIV实现鼠标经过背景变色

css实现鼠标悬停时滑出层提示的方法

纯css实现的tab切换效果

鼠标经过背景变色之CSS+DIV方法

表格颜色渐变效果

CSS+DIV实现鼠标经过背景变色

CSS滤镜实现的颜色渐变翻转效果

精品推荐
分类导航