开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

在css中有没有办法不用transform就能得到聊天气泡？

在CSS中，即使不使用transform属性，也可以通过其他方法来创建聊天气泡效果。以下是一些基础概念和相关技术，以及如何实现聊天气泡的示例：

基础概念

伪元素：:before和:after可以用来在元素的前面或后面插入内容。
边框半径：border-radius属性用于创建圆角。
定位：position属性（如relative、absolute）用于精确控制元素的位置。

实现方法

使用伪元素和边框：通过为聊天气泡添加伪元素，并利用边框和圆角来形成气泡的尖角效果。
使用背景渐变：利用CSS渐变来模拟气泡的阴影和光泽效果。

示例代码

以下是一个简单的例子，展示了如何使用纯CSS创建一个基本的聊天气泡：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Bubble Example</title>
<style>
  .chat-bubble {
    position: relative;
    padding: 10px;
    margin: 1em 0;
    border-radius: 15px;
    background-color: #e0e0e0;
    max-width: 60%;
  }

  .chat-bubble::after {
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
  }

  .user {
    align-self: flex-end;
    background-color: #07c160;
    color: white;
  }

  .user::after {
    bottom: 100%;
    left: 70%;
    border-width: 10px 0 0 10px;
    border-color: transparent transparent transparent #07c160;
  }

  .bot {
    align-self: flex-start;
  }

  .bot::after {
    top: 100%;
    left: 30%;
    border-width: 0 10px 10px 0;
    border-color: transparent #e0e0e0 transparent transparent;
  }
</style>
</head>
<body>

<div class="chat-container">
  <div class="chat-bubble user">
    Hello! How can I help you today?
  </div>
  <div class="chat-bubble bot">
    Hi there! I'm here to answer your questions.
  </div>
</div>

</body>
</html>

应用场景

即时通讯应用：在聊天界面中显示消息气泡。
社交媒体平台：在评论或私信功能中使用。
客服系统：在在线客服对话框中展示对话内容。

优势

灵活性：可以通过调整CSS属性轻松改变气泡的样式和位置。
性能：相比使用JavaScript或复杂的HTML结构，纯CSS解决方案通常更轻量且性能更好。

通过上述方法，可以在不使用transform属性的情况下，有效地创建出具有视觉吸引力的聊天气泡效果。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

涨姿势了，有意思的气泡 Loading 效果

没错，这个效果中的核心气泡效果，其实借助 CSS 中的滤镜，能够比较轻松的实现，就是所需的元素可能多点。...参考我们之前的：使用纯 CSS 实现超酷炫的粘性气泡效果巧用 CSS 实现酷炫的充电动画圆弧的实现首先，我们可能需要实现这样一段圆弧：这里需要用到的技术是：角向渐变 conic-gradient...这样，我们就得到了这样一个效果，在尾部有大量气泡动画，不断向外扩散的效果：借助滤镜实现粘性气泡效果 OK，到这里整个效果基本就做完了。...解决的方案：所以我们需要让气泡在执行透明度变化的同时，进行一个随机的发散位移小圆形气泡的大小也可以带上一点随机，同时，在动画过程逐渐缩小当然，整个动画的基础，还是在容器设置了滤镜 blur()...，我们能得到了这样的效果：配合上圆环的效果：配合上父容器的 filter: hue-rotate() 动画，就能实现颜色的动态变换，得到我们最终想要的效果：这样，没有了第一版本的违和感，整个效果也显得比较自然

6773 0

使用纯 CSS 实现超酷炫的粘性气泡效果

最近，在 CodePen 上看到这样一个非常有意思的效果：这个效果的核心难点在于气泡的一种特殊融合效果。...2-4 秒范围内随机，让 animation-delay 在 1-2 秒范围内随机，这样，我们就可以得到非常自然且不同的上升动画效果，基本不会出现重复的画面，很好的模拟了随机效果： CodePen Demo...运用上随机效果，animation: moveToTop #{(random(2500) + 1500) / 1000}s ease-in-out -#{random(5000)/1000}s infinite，就能得到上述的...filter: blur(5px); } 就这么简单，父容器添加白色底色以及对比度滤镜 filter: contrast(8)，子容器添加 filter: blur(5px) 即可，这样，我们就能得气泡的融合效果...最终，我们就能完美的复刻文章一开头，使用 SVG 滤镜实现的效果：在文章中，我省去了大部分基础的 CSS 代码，完整的代码，你可以戳这里：CodePen Demo -- Bubble Rises 最后

1.8K3 0

「css基础」Transforms 属性在实际项目中如何应用？

从上面的图中可以看出，文本框的实际效果，文本内容的内容并不是在中间而是在下半部分，并不是我们预想的垂直居中，你也许在想，如果我们把文本内容在往上提一半，正好能满足垂直居中的需求，Transform属性中正好有个平移的属性...: perspective(1px) translateY(-50%); } 02 对话框气泡微信想必大家天天用，我们是否注意到聊天界面里文本对话框气泡，右边或左边会凸出个小箭头指向聊天人的头像，这个例子就要实现类似微信对话框的气泡...添加气泡箭头接下来我们来实现右箭头的气泡效果，贴着文本框我们在右边放置个空文本框，我们使用css的为元素属性 ::before 来实现，样式代码如下： .box::before { content...气泡箭头应该在内容中间区域的位置，接下来，移动这个小方块的位置，正好可以利用我们刚才学到垂直居中知识，css样式代码如下： .box::before { // ......在本文中，我们已经了解了如何将CSS的Transforms变换属性运用到真实的项目中。通过本文，我们已经了解了如何在页面上垂直对齐元素，对话框气泡，弹跳和旋转的加载动画，以及如何实现翻转动画。

3.5K3 0

「css基础」Transforms 属性在实际项目中如何应用？

，并不是我们预想的垂直居中，你也许在想，如果我们把文本内容在往上提一半，正好能满足垂直居中的需求，Transform属性中正好有个平移的属性translate(x,y)，我们可以使用Transform让元素在...: perspective(1px) translateY(-50%); } 对话框气泡微信想必大家天天用，我们是否注意到聊天界面里文本对话框气泡，右边或左边会凸出个小箭头指向聊天人的头像，这个例子就要实现类似微信对话框的气泡...接下来我们来实现右箭头的气泡效果，贴着文本框我们在右边放置个空文本框，我们使用css的为元素属性 ::before 来实现，样式代码如下： .box::before { content: '';...请记住，您的网站是为用户而不是为自己服务的（在大多数情况下，无论如何）。因此，应该利用CSS动画为用户提供更好的用户体验，而不是耍酷。...小节在本文中，我们已经了解了如何将CSS的Transforms变换属性运用到真实的项目中。通过本文，我们已经了解了如何在页面上垂直对齐元素，对话框气泡，弹跳和旋转的加载动画，以及如何实现翻转动画。

2.7K0 0

30 个案例教你用纯 CSS 实现常见的几何图形

给圆形设置透明色和溢出隐藏，并且消除掉矩形不想显示的 border，就能得到扇形了。...这样，我们就能得到一个 ∞ 形状了。...源代码：codepen24 21.聊天气泡类型1：这是一个类似微信的聊天气泡。...; border: 1px solid #e6d9b3; border-style: none none solid solid } 源代码：codepen26 类型3：这种是类似 QQ 的聊天气泡...最后再通过绝对定位进行微调，就能得到上图的效果了。源代码：codepen36 参考： The shapes of CSS 三角形的 N 种画法与浏览器的开放世界

5.7K3 0

8个硬核技巧带你迅速提升CSS技术

选择器和类对比起来性能上确实没后者那么好，但如今浏览器对于CSS的解析速度已得到大大的提升，完全可忽略选择器那丁点的性能问题。可是CSS模块众多，依次推出的选择器也很多。...减少样式代码的重复性增加样式代码的扩展性提高样式代码的灵活性增多一种CSS与JS的通讯方式不用深层遍历DOM改变某个样式同时变量也是浏览器原生特性，无需经过任何转译可直接运行，也是DOM对象，...气泡对话框的身板就是一个圆角矩形，可用直接绘制，小尾巴是一个三角形，可用::after占位并绘制。这样就无需在里添加一个绘制小尾巴了。 ?...先将两个三角形错位叠加生成一个箭头状的图形，再将该图形叠加到带边框圆角矩形的右边，最后将黑色三角形着色成白色，就能得到上图的带边框气泡对话框了。 ?...拜托，这不是JS而是CSS，CSS字符串拼接当然有自己的规则。CSS字符串拼接既不能使用+相连也可不用空格间隔。

2.9K3 0

鸿蒙NEXT版仿微信聊天App的气泡背景

上一节我们实现了仿微信聊天页面的消息左右对齐方式，那么聊天消息的气泡背景也是很有必要的，不管聊天消息有多长有多高，气泡背景都能自动跟着拉长拉高，恰当地把消息内容都包裹在气泡中，如下图所示。...在安卓系统中，气泡背景通过点九图（也叫九宫格图片）实现，利用Android Studio特制的.9.png图片，安卓App能够根据实际宽高自动拉伸点九图的指定区域。...ResizableOptions的参数slice中有top、left、bottom和right四个属性，分别代表图片上下左右四个方向拉伸时保持不变距离。...比如下面代码就往Stack容器依次放入Image组件和Text组件，由此实现聊天消息的气泡背景。...，就能实现跟随文本内容尺寸而动态调整宽高的气泡背景效果了。

3541 0

React 轮播动画探索

/css/navigation"; import"swiper/css/pagination"; import"swiper/css/scrollbar"; import"....另一个问题 —— 基于 swiper 动态更新氛围气泡在实际业务使用中，其实还遇到了优先级展示的问题，氛围气泡的位置一共有三个组件在轮流展示：打开直播间，先展示一段 5s 的课程公告公告消失后，如果有氛围气泡数据...prependSlide('new Slide'); }; 从这里就能看出来，在 react 中，如果需要动态更新幻灯片的场景，使用 swiper...opacity 500ms, transform 500ms; } } 效果如下：从这里可以看出和 swiper 的区别，swiper 类似于 in-out 的效果，而我们希望实现的氛围气泡是...swiper 作为轮播效果组件，它受限于前后幻灯片同时存在的这一问题，在氛围气泡需求中表现不是很好。 4.2.

2.8K1 0

4月7日星期四晴论技术负债

这种技术上的选择，就像一笔债务一样，虽然眼前看起来可以得到好处，但必须在未来偿还。软件工程师必须付出额外的时间和精力持续修复之前的妥协所造成的问题及副作用，或是进行重构，把架构改善为最佳实现方式。...最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的兄弟相邻选择器例如 h1 + p {margin-top:50px;}，flex布局Flex 是 Flexible Box...的缩写，意为弹性布局"，用来为盒状模型提供最大的灵活性"，transform变换transform 属性向元素应用 2D 或 3D 转换。...尤其是我还能用relative定位实现那种悬停显示气泡效果。（今明两天还能摸鱼的话就实装到新款nota标签上去。）...但是如果用transform变换的话……哦，等下，这个好像确实是联立公式计算偏移量的方案更优势。至少不用担心因为filter滤镜属性导致transform属性失效。

5461 0

如何提升CSS技术？8个硬核技巧带你迅速提升CSS技术

选择器和类对比起来性能上确实没后者那么好，但如今浏览器对于CSS的解析速度已得到大大的提升，完全可忽略选择器那丁点的性能问题。可是CSS模块众多，依次推出的选择器也很多。...减少样式代码的重复性增加样式代码的扩展性提高样式代码的灵活性增多一种CSS与JS的通讯方式不用深层遍历DOM改变某个样式同时变量也是浏览器原生特性，无需经过任何转译可直接运行，也是DOM对象，...气泡对话框的身板就是一个圆角矩形，可用直接绘制，小尾巴是一个三角形，可用::after占位并绘制。这样就无需在里添加一个绘制小尾巴了。...先将两个三角形错位叠加生成一个箭头状的图形，再将该图形叠加到带边框圆角矩形的右边，最后将黑色三角形着色成白色，就能得到上图的带边框气泡对话框了。...拜托，这不是JS而是CSS，CSS字符串拼接当然有自己的规则。CSS字符串拼接既不能使用+相连也可不用空格间隔。

2.4K4 0

SVG的动态之美-搜狗地铁图重构散记

为什么气泡和起终点等节点没有同比例缩放？因为这些节点不是矢量的SVG，缩放会失真。如果想得到“矢量”的缩放效果只能重新计算这些节点的尺寸，这样的代价太大了。所以我们不得不忍受这些问题。...，包括底图、定位、气泡、求路等等等等。...这两个属性在实现SVG缩放时非常关键，但搜狗地铁图并没有借助viewBox实现缩放，而是将全部的展示交给了view节点的transform，一定程度上减轻了CSS和SVG坐标差异性造成的计算复杂度。...如果你熟悉CSS的transform，SVG的transform便不会有任何问题。...搜狗地铁图在评审和开发过程中有过几次商讨，最终定下的方案是：最大缩放比例写死为1.5倍；最小缩放比例以完整展示当前城市的地铁全貌为准。

2.3K0 1

前端-微信小程序开发(3)：这是一个组件

如此一来，我们基本的弹出层样式就七七八八了，这里可以看出一些特点：小程序与平时我们的样式差距不大，稍微改点就能用，甚至能直接通用；另一方面，我们也需要思考一个问题：公共部分的CSS该怎么处理？...我这里想的是将所有公共部分的CSS放到一个全局的文件global.wxss中，然后在每个业务级页面import即可，所以我们这里需要形成一个公共的WXSS库，这个与纯web映射起来即可，我们这里便不深入...我们将原来弹出层类会用到的CSS全部翻译为WXSS，放入global.wxss中： ?...dom节点了，另外小程序的组件与我们之前的“组件”从定义到使用上有很大的不同，之前我们是以js作为控制器，现在是以标签wxml作为控制器，根本没有办法在js中获取实例，而小程序组件的生命周期并不包含显示隐藏生命周期...所以使用上有很大的区别，但是什么都不能阻碍我们写通用组件的决心，于是我们明天来写一些通用的组件库，并且形成一个小程序的体系，这里想的是有： ① 消息框 ② toast提示 ③ 日历组件 ④ 然后再做一个需要定位的气泡组

5123 0

前端面试题整理

答：凡是在闭包域内声明的变量或方法,外部无法直接访问,闭包域可以访问外部的变量或方法.隔离了作用域。...JavaScript的AMD规范样式自动居中有哪几种？...答： {display:block,margin:0 auto} {display:block,position,absolute,left:50%,right:50%,transform:translate...答: 冒泡排序-----从小到大排序,存在10个不同大小的气泡，由底至上地把较少的气泡逐步地向上升，这样经过遍历一次后，最小的气泡就会被上升到顶（下标为0），然后再从底至上地这样升，循环直至十个气泡大小有序...头 4.启用Gzip压缩文件 5.将css放在页面最上面 6.将script放在页面最下面 7.避免在css中使用表达式 8.将css, js都放在外部文件中 9.减少DNS查询 10.最小化

1.8K2 1

值得一看的小程序 TabBar 创意动画

Hi 头像最近进行了 v2 版大改版，其中的交互动画得到了不少好友的称赞。今天我就来分享一些关于小程序 TabBar 创意动画，将从 TabBar 类型、完整的 TabBar 创意动画进行分析。...简单来说：使用 CSS fixed 将 Tabbar 固定到底部，需要做 iPhone x 全面屏适配在切换页面（onShow）后，设置当前高亮的 TabItem ?...首先，我们来看几个比较经典的动画效果：气泡动画参考气泡动画的核心点为，几个子按钮按照圆心分布，弹出有先后。 https://codepen.io/0guzhan/pen/YvNmwJ ?...TabBar 上都会有一些微动画，比如爱奇艺 APP 上的气泡动画和京东 APP 上的图标转场动画。...CSS filter 滤镜与 SVG 高斯模糊实现，在 web 端上没有问题，但在真机上小程序上不支持。

4.7K4 2

MoodDrop：打造一款温柔的心情打卡单页应用

它不需要注册、不需要输入，只需轻轻点一下按钮，就能留下当下的心情。我把这个项目取名为 MoodDrop。...动画优化：流畅的掉落与漂浮效果最初的动画采用了基本的 transition 和 transform: translateY，虽然已经能看到掉落效果，但缺乏弹性和灵动感。...CodeBuddy 随即自动优化逻辑，改用 CSS @keyframes 来构建完整的掉落、弹跳和之后的缓慢漂浮。它为每个气泡动态计算了初始位置，并添加了淡入淡出的缓动，形成了一种非常自然的动态流程。...最让我惊喜的是，CodeBuddy 还贴心地将每日情绪以「颜色气泡堆叠」的方式可视化出来，就像一个微型心情日历，不占地方，却温柔地提醒着用户：你有在持续关注自己的内心哦。...它不仅能准确理解我用中文描述的设计愿景，还能主动提出并实现更优的技术方案（比如 CSS 动画优化、localStorage 持久化封装、按钮交互增强），让我从「想法」到「落地」的路径无比丝滑。

1400 0

CSS 奇思妙想 | 巧妙的实现带圆角的三角形

之前在这篇文章中 -- 《老生常谈之 CSS 实现三角形》，介绍了 6 种使用 CSS 实现三角形的方式。但是其中漏掉了一个非常重要的场景，如何使用纯 CSS 实现带圆角的三角形呢？...当然，要保持三角形大小一致，在增大/缩小 stroke-width 的同时，需要缩小/增大图形的 width/height： ?...图形拼接不过，上文提到了，使用纯 CSS 实现带圆角的三角形，但是上述第一个方法其实是借助了 SVG。那么仅仅使用 CSS，有没有办法呢？...所以，其实我们只需要能够画出一个这样的带圆角的菱形，通过 3 个进行旋转叠加，就能得到圆角三角形： ?...上述各个图形的完整代码，你可以戳这里：CodePen Demo -- A triangle with rounded and gradient background 最后本文介绍了几种在 CSS 中实现带圆角三角形的方式

5.2K4 2

发个微信就能生成二维码，分享从此变得更简单！

在日常教学、活动推广、企业文件分享等场景中，想要快速把文件、视频、图片等内容分享给多人，但逐一发送不仅麻烦，还容易出错。二维码分享成为了一个更高效的选择。...今天要介绍的，是一个极简又高效的小助理：“发消息生码客服”，只要打开微信，对客服“发送消息”就能生成二维码，再也不用登录平台、复杂操作了！✨️ 立即体验，提升分享效率！...2、发送内容您可以直接向客服发送您要分享的文件、视频、图片或聊天记录。可以一次性发送多个内容。您也可以在历史微信聊天记录中选择自己的聊天记录、他人转发给您的聊天内容或文件，直接转发给客服。...⚠️ 请注意，生码客服在“客服消息”的蓝色小气泡里哦3、秒变二维码请按客服提示进行回复，会自动生成二维码，您只需保存并分享。还等什么？快来扫码试用，体验“客服帮你生码”的便捷吧！

3121 0

用SVG实现一个优雅的提示框

NO.5 SVG 方案在讨论中我们想到 SVG的path 和这个提示框的样式天然的匹配（建议先了解下path的相关文档），查阅了相关的文档和资料后我们大致得到了使用SVG来实现的如下几个优点：能轻松满足阴影...，而使用drop-shadow 就能符合我们尖角和气泡框都有阴影的要求。...NO.8 方案改进要应付多变的气泡尖角一定要想办法把尖角抽离出原先的气泡外层路径，生成尖角路径后在整合到气泡上形成一个完整的闭合路径。...通过设计不同的尖角路径我们就能组合成不同的气泡样式： ? ?...10 总结至此在ToolTips这块基本已经满足了设计的需求，同时也沉淀了SVG路径生成工具。使用SVG来实现ToolTips能覆盖 CSS clip-path不能完美解决的几个场景。

2.6K1 0

耗时十分钟，做了一个 uniapp 灵感泡泡机

cli @dcloudio/uni-cli vue create -p dcloudio/uni-preset-vue IdeaBubbles cd IdeaBubbles npm install 我几乎不用动手去搜索或排查错误...CodeBuddy 对这些细节的处理非常专业，按钮 hover 动画使用了 CSS 的 transform: scale(1.05)，加了 transition 让它看起来不突兀，甚至连 box-shadow...当点击“清空”时，屏幕上的所有泡泡会同时触发缩放+淡出动画，像一场气泡爆破秀。...用户体验在细节上达到了完整闭环。结语：这不仅是工具，而是代码魔术师从最开始的构思到最后的交互完成，我几乎没有写过一行核心逻辑代码。...它写的代码非常有条理，结构清晰，变量命名规范，CSS 动效自然细腻，几乎不需要我修改就可以直接上线运行。

781 0

移动端重构实战系列1——基础知识

vw, vh系列的单位，因为以后将会是个得力的助手 flex 不用多介绍，大名如雷贯耳。...所以并没有改变窗口大小，也就没有办法通过window的onresize事件来监听了） Web移动端Fixed布局的解决方案深入理解CSS中的层叠上下文和层叠顺序我们现在一般android采用fixed...给图片提供一个容器，设置高度为0，根据宽度按照图片的比例使用paddin-top得到一个高度值，然后图片绝对定位设置宽高为100%即可，如图片尺寸为200*100（则高度为宽度的二分之一）： .img-wrap...这里除了之前css2时代的常规方法，我们更多的使用css3的transform及flex方法，而img或video的最新object-position还得等待兼容的时代 Centering in CSS...css3 transform 101 Advanced CSS3 2D and 3D Transform Techniques css3 transtion 101 css3 animation 101

1.2K1 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭