TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
119篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
css 实现消息气泡效果。 vue element admin右上角添加一个信息提醒的菜单
1477
人阅读
2020/1/7 12:58
总访问:
3997287
评论:
0
收藏:
0
手机
分类:
前端
如图,这种聊天气泡效果 ![](https://img.tnblog.net/arcimg/aojiancc2/e9c896bd1b1a46cd999035e7820df8d5.png) 这个其实挺简单,没什么好说的,只是有一个点就是当气泡里边的数字,不断变大的时候,会影响气泡相对图标位置的,怎么解决这种问题呢,可以使用`transform`去实现 ``` // 当气泡里边的数字变大的时候往右边偏移,就不会改变气泡里边的数字相对下方图标的位置了 transform: translateY(-10%) translateX(100%); ``` 主要就是后边一个设置100%之后,气泡里边的数字变大的时候整体就会往右边偏移,不会像默认的往左边偏移,就不会改变泡相对图标位置了。只需要调整好气泡相对图标的位置就好了,一般就是设置right,top值,整体样式如下: ``` .messagePoint{ // width: 15px; height: 15px; padding: 0px 5px; font-size: 12px; font-family: Microsoft YaHei; font-weight: 400; color: #FFFFFF; border-radius: 10px; background-color: #FF5A00; position:absolute; right: 14px; top: 8px; text-align: center; line-height: 15px; // 当气泡里边的数字变大的时候往右边偏移,就不会改变气泡里边的数字相对下方图标的位置了 transform: translateY(-10%) translateX(100%); } ``` html里边的结构如下: ``` <div class="right-menu-item" style="cursor: pointer;position: relative;margin-right: 7px;"> <svg-icon icon-class="bell1" /> <div class="messagePoint">9</div> </div> ``` #### 图标也可以直接引用png这类的格式 ![](https://img.tnblog.net/arcimg/aojiancc2/2bd74d0825324b5f87a2601589e72508.png) 代码如下: ``` <div style="position: relative;"> <img style="height: 22px;" :src="require('@/assets/imgs/labroom/lingdang4.png')"> <div class="messagePoint">6</div> </div> ``` 样式一样的,位置这些可以针对性的微调一下 ``` .messagePoint { // width: 15px; height: 15px; padding: 0px 5px; font-size: 12px; font-family: Microsoft YaHei; font-weight: 400; color: #FFFFFF; border-radius: 10px; background-color: #FF5A00; position: absolute; right: 11px; top: 17px; text-align: center; line-height: 15px; // 当气泡里边的数字变大的时候往右边偏移,就不会改变气泡里边的数字相对下方图标的位置了 transform: translateY(-10%) translateX(100%); } ``` 这个消息气泡效果是放到el-menu-item里边的,代码一起贴一下 ``` <el-menu-item style="float: right;"> <template slot="title"> <div style="position: relative;"> <img style="height: 22px;" :src="require('@/assets/imgs/labroom/lingdang4.png')"> <div class="messagePoint">6</div> </div> </template> </el-menu-item> ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}