大家好，今天给大家介绍一款，用CSS实现的带头像的彩色垂直菜单源码（图1）。送给大家哦，获取方式在本文末尾。

图1

鼠标悬停在相应区域，就会出现头像

图2

带切换动画（图3）

图4

部分代码：

* {margin: 0px;padding: 0px;box-sizing: border-box;
}body {align-items: center;justify-content: center;min-height: 100vh;background-color: #eee;font-family: 'Lato', sans-serif;
}
body .container {width: 300px;font-size: 1.2em;border-radius: 8px;overflow: hidden;box-shadow: 6px 6px 24px rgba(0, 0, 0, 0.1);cursor: pointer;margin:30px auto;
}
body .container .box {display: flex;justify-content: space-between;align-items: center;width: 100%;height: 80px;padding: 0px 20px;transition: all 0.3s;color: white;
}
body .container .box.box1 {background-color: #7986CB;
}
body .container .box.box2 {background-color: #FF8A65;
}
body .container .box.box3 {background-color: #F06292;
}
body .container .box.box4 {background-color: #4DB6AC;
}
body .container .box .name {width: 80px;
}
body .container .box .name h4, body .container .box .name h5 {font-weight: 300;
}
body .container .box .name h5 {font-size: 0em;line-height: 1.5;
}
body .container .box p {font-size: 0.8em;font-weight: 300;
}
body .container .box:before {content: "";height: 0px;width: 0px;border: 2px solid white;border-radius: 50%;margin-left: -50%;background-color: white;background-size: contain;background-position: center;background-repeat: no-repeat;
}
body .container .box.box1:before, body .container .box.box3:before {background-image: url("../image/011-girl.png");
}
body .container .box.box2:before, body .container .box.box4:before {background-image: url("../image/163807.png");
}
body .container .box:hover:before {content: "";height: 50px;width: 50px;border-radius: 50%;margin-left: 0%;transition: all 0.4s;
}
body .container .box:hover {height: 120px;transition: all 0.3s;
}
body .container .box:hover .name h5 {font-size: 0.7em;transition: all 0.6s;
}

本模板编码：10118，需要的朋友，点击下面的链接后，搜索10118，即可获取。

CSS实现的带头像的彩色垂直菜单源码相关推荐

多接口带头像挂件制作小程序源码/短视频去水印微信小程序源码
☑️ 编号:ym349 ☑️ 品牌:无 ☑️ 语言:微信小程序 ☑️ 大小:1.6MB ☑️ 类型:短视频去水印 ☑️ 支持:微信小程序
个人HTML期末大作业~ 个人网页(HTML+CSS)6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码
HTML期末大作业~ 个人网页6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码作品介绍下面介绍一下我的个人小网站吧,我的网站背景稍微单调一点白色,主要个人比较喜欢白色了,布局上面使用 ...
HTML期末大作业~ 明星林依晨（7页）带留言学生网页设计作业源码(HTML+CSS+JS)
HTML期末大作业~ 明星林依晨(7页)带留言学生网页设计作业源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求 ...
HTML网页设计制作大作业(div+css) ~中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化)
HTML网页设计制作大作业(div+css) ~ 中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
个人HTML期末大作业~ 个人网页(HTML+CSS)6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码...
HTML期末大作业~ 个人网页6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码作品介绍下面介绍一下我的个人小网站吧,我的网站背景稍微单调一点白色,主要个人比较喜欢白色了,布局上面使用 ...
2022虎年背景全新UI头像框制作带安全检测微信小程序源码下载支持多种流量主
这个只是在之前的哪一款的基础上面加一个安全内容检测至于界面UI什么的基本是没有变化的,只是让大家审核能过得去内包含了虎年虎娃多种分类头像框模板,全是和2022虎年有关每一种分类都包含了多种模板制 ...
PHP 使用GD库合成带二维码和圆形头像的海报步骤以及源码实现
PHP 使用GD库合成带二维码和圆形头像的海报步骤以及源码实现之前记录过一篇文章,不过那只是简单将二维码合成到海报中去,这次还要合成头像,而且是圆形.所需要素材就不一一列举,直接代码吧 1.先获取用 ...
壁纸背景墙/头像/动态壁纸小程序源码-支持用户投稿-带部分采集功能+搭建教程
介绍: 今天自己搭建测试了一下这款背景墙/头像/动态壁纸小程序源码,源码使用dcloud云开发 (云开发优势:无需服务器域名直接搭建部署即可,成本低方便维护.)支持微信QQ双端小程序也就是说可以打包成 ...
HTML5期末大作业：在线电影网站设计——我不是药神电影介绍(4页) HTML+CSS+JavaScript 大二实训大作业HTML源码...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...

CSS实现的带头像的彩色垂直菜单源码

大家好，今天给大家介绍一款，用CSS实现的带头像的彩色垂直菜单源码（图1）。送给大家哦，获取方式在本文末尾。

鼠标悬停在相应区域，就会出现头像

带切换动画（图3）

部分代码：

本模板编码：10118，需要的朋友，点击下面的链接后，搜索10118，即可获取。

CSS实现的带头像的彩色垂直菜单源码相关推荐

最新文章

热门文章