您现在的位置是：网站首页> 编程资料编程资料

css实现随鼠标移动div渐变色效果纯CSS制作菜单栏当鼠标经过时会变色的css控制div鼠标放上去变色css 鼠标经过文字变色CSS 实现鼠标放在上面时整行变色效果

2021-09-07 893人已围观

简介多组div排列着圈子，利用css的hover属性产生色层渐变，只要拷贝一段很简单的html和css就可以实现

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

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

上一篇：元素浮动之后文字会环绕而不是重合原因示例解答CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

下一篇：css样式加载顺序及覆盖顺序深入理解css中style和class的加载顺序示例介绍CSS 的加载及加载顺序简介

您现在的位置是：网站首页> 编程资料编程资料

css实现随鼠标移动div渐变色效果纯CSS制作菜单栏当鼠标经过时会变色的css控制div鼠标放上去变色css 鼠标经过文字变色CSS 实现鼠标放在上面时整行变色效果

相关内容

点击排行

本栏推荐

猜你喜欢