CSS3 仿微信聊天小气泡

最新推荐文章于 2024-06-29 12:32:49 发布
最新推荐文章于 2024-06-29 12:32:49 发布
阅读量757 收藏 1
点赞数
原文链接：https://www.cnblogs.com/aliyue/p/5896176.html
版权

今天给大家分享一个我刚做的项目中的一个小案例， 因为我们在做一个聊天的功能，之前的聊天页面UI很丑，我就不在这里展示给大家了。

现在就教大家怎么用css3制作一个和微信聊天界面一样的页面。

首先给大家看看页面的样子吧，如下图所示：

小月博客仿微信聊天界面

小月博客仿微信聊天界面

页面大致就是这个样子，接下来我们来一起学习制作步骤吧。

第一部分： HTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<div class="leftd">

    <span ng-class="leftd_h">

        <img ng-src="./img/c_pic.pn" />

    </span>

    <div class="speech left" ng-class="speech left">

        二货，你看你傻样！

    </div>

</div>

<div class="rightd">

    <span ng-class="rightd_h">

        <img ng-src="./img/u_pic.pn" />

    </span>

    <div class="speech right" ng-class="speech left">

        嘻嘻嘻嘻。。。。。。

    </div>

</div>

<div class="leftd">

    <span ng-class="leftd_h">

        <img ng-src="./img/c_pic.pn" />

    </span>

    <div class="speech left" ng-class="speech left">

        笑什么笑，没看到本宝宝今天变漂亮了吗？

    </div>

</div>

<div class="rightd">

    <span ng-class="rightd_h">

        <img ng-src="./img/u_pic.pn" />

    </span>

    <div class="speech right" ng-class="speech left">

         不不不，每天你都很漂亮的啦！

    </div>

</div>

第二部分： CSS3

PS（这里也算是最重要的部分了我就把全部的代码都展示出来吧！）

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

/* 微信气泡 */

div.speech {

    float: left;

    margin: 10px 0;

    padding: 8px;

    table-layout: fixed;

    word-break: break-all;

    position: relative;

    background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#ffffff), color-stop(0.1, #ececec), color-stop(0.5, #dbdbdb), color-stop(0.9, #dcdcdc), to(#8c8c8c) );

    border: 1px solid #989898;

    border-radius: 8px;

}

div.speech:before {

    content: '';

    position: absolute;

    width: 0;

    height: 0;

    left: 15px;

    top: -20px;

    border: 10px solid;

    border-color: transparent transparent #989898 transparent;

}

div.speech:after {

 content: '';

 position: absolute;

 width: 0;

 height: 0;

 left: 17px;

 top: -16px;

 border: 8px solid;

 border-color: transparent transparent #ffffff transparent;

}

div.speech.right {

 display: inline-block;

 box-shadow: -2px 2px 5px #CCC;

 margin-right: 10px;

 max-width: 75%;

 float: right;

 background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#e4ffa7), color-stop(0.1, #bced50), color-stop(0.4, #aed943), color-stop(0.8, #a7d143), to(#99BF40) );

}

div.speech.right:before {

 content: '';

 position: absolute;

 width: 0;

 height: 0;

 top: 9px;

 bottom: auto;

 left: auto;

 right: -10px;

 border-width: 9px 0 9px 10px;

 border-color: transparent #989898;

}

div.speech.right:after {

 content: '';

 position: absolute;

 width: 0;

 height: 0;

 top: 10px;

 bottom: auto;

 left: auto;

 right: -8px;

 border-width: 8px 0 8px 9px;

 border-color: transparent #bced50;

}

div .left {

 display: inline-block;

 box-shadow: 2px 2px 2px #CCCCCC;

 margin-left: 10px;

 max-width: 75%;

 position: relative;

 background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#ffffff), color-stop(0.1, #eae8e8), color-stop(0.4, #E3E3E3), color-stop(0.8, #DFDFDF), to(#D9D9D9) );

}

div .left:before {

 content: '';

 position: absolute;

 width: 0;

 height: 0;

 top: 9px;

 bottom: auto;

 left: -10px;

 border-width: 9px 10px 9px 0;

 border-color: transparent #989898;

}

div .left:after {

 content: '';

 position: absolute;

 width: 0;

 height: 0;

 top: 10px;

 bottom: auto;

 left: -8px;

 border-width: 8px 9px 8px 0;

 border-color: transparent #eae8e8;

}

.leftimg {

 float: left;

 margin-top: 10px;

}

.rightimg {

 float: right;

 margin-top: 10px;

}

.leftd {

 clear: both;

 float: left;

 margin-left: 10px;

}

.rightd {

 clear: both;

 float: right;

 margin-right: 10px;

}

 

.leftd_h{

 width: 39px;

 height: 39px;

 border-radius: 100%;

 display: block;

 float: left;

 overflow: hidden;

}

 

.leftd_h img{

 display: block;

 width: 100%;

 height: auto;

}

.rightd_h{

 width: 39px;

 height: 39px;

 border-radius: 100%;

 display: block;

 float: right;

 overflow: hidden;

}

 

.rightd_h img{

 display: block;

 width: 100%;

 height: auto;

}

　　

这里基本是上用了CSS伪类元素，来制作的小气泡。网上有很多的案例都是吧用户聊天的头像作为背景图，但是我感觉这样子在实际项目中，并不是很合适，所以我就做了一些修改，然我们更加实用。

以上的代码就是小气泡的全部代码，需要运行案例的请回复给我留言。

下一篇文章我将要给大家介绍怎么用 ionic 来制作聊天页面，以及数据的交互问题。有兴趣的敬请期待吧！

IT 哈
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 css3完全仿微信聊天气泡对话框.rar
07-10
HTML5 css3完全仿微信聊天界面的气泡对话框，这里还模拟实现了头像、气泡缺口以及聊天双方的气泡错位等效果，可以说模拟的十分相似了，支持在手机端使用，CSS3技术气泡对话框特效，请看截图所示的效果哦。
【CSS】如何实现微信聊天气泡
吴纯玲的博客
03-20 6603
先来分析一下聊天气泡 气泡分割为两部分，左边的矩形，右边的三角形 矩形的实现比较简单 先对对右边的三角形进行分析 div{ width:100px; height:100px; border:solid 50px; border-color:#f5f5f5 #f5f5f5 #f5f5f5 #F8C301; } 如果把width，height置...
css动画（仿微信聊天页面）
最新发布
2303_82176667的博客
06-29 373
微信聊天框以其简洁直观的界面和流畅的交互体验而广受欢迎。本文将展示如何利用HTML和CSS技术，在自己的网页上实现类似微信的聊天框效果。我们将一步步指导您完成，让网站或应用也能拥有专业且用户友好的聊天功能。
C#+ html 实现类似QQ聊天界面的气泡效果
weixin_33862041的博客
11-01 540
1 /**定义两个人的头像*/ 2 Myhead = "&lt;img src=qrc:/chatdemo/Msg/Head.png width='30px'heigth='30px'&gt;"; 3 QString strHead = QString("C:/Users/tax10_000/Desktop/ql_184555_828078.jpg"); 4 ot...
CSS3 仿微信聊天小气泡实例代码
09-24
本篇文章主要介绍了CSS3 仿微信聊天小气泡实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
详解微信小程序实现仿微信聊天界面(各种细节处理)
12-01
在微信小程序开发中，创建一个仿微信聊天界面是一项常见的任务，这个界面需要处理多个细节以达到良好的用户体验。本文主要探讨了如何实现这一目标，重点解决了两个关键问题：一是输入框弹出软键盘后，原有聊天内容被...
仿微信聊天布局
07-29
在IT行业中，设计一个仿微信聊天布局是一项常见的任务，它涉及到用户界面（UI）的设计以及用户体验（UX）的优化。微信作为中国最流行的即时通讯应用，其聊天界面的布局深受用户喜爱，因此许多开发者会尝试复刻这一...
微信小程序模仿微信聊天界面布局demo简单源码学习开发
06-14
在本文中，我们将深入探讨如何使用CSS和div技术来创建一个微信小程序，模仿微信聊天界面的布局。这个项目是为初学者提供一个源码学习的机会，帮助他们掌握微信小程序的开发基础。 首先，我们需要理解微信小程序的...
CSS实现聊天气泡效果
qq_45457134的博客
11-24 2099
html <div class="pop"> <div class="arrow"></div> </div> css /*气泡*/ .pop { position:relative; width:100px; height:35px; line-height: 33px; /*background:#fff;*/ color:#fff; border-radius:5px; /* 圆角 */ background-col
css实现气泡的小尖角效果
11-21
效果图（边框颜色太淡，放在{}里面）： {  } 参考链接 纯CSS气泡效果 需要用到的知识点： 当div的宽度和高度都是0时，整个边框是由四个三角形组成的，每一边为一个三角形，利用这点，来做小尖角，比如如下： 把不需要的三边的边框的颜色设置为与背景相同，这样就得到想要的小尖角，然后再利用定位调整一下位置就可以了。   上面的方法可以得到一个带有颜色的小尖角，但是效果图是显示带有边框的小金角。所以在已有的基础上，出现两个小尖角，然后进行叠加，利用z-index属性来显示。因为需要两个，可以利用伪元素，这样就不会出现无语义化的元素，代码如下： &::before { content:
css实现聊天气泡
weixin_43295106的博客
10-08 311
<div class="bubble">热</div> .bubble { position: absolute; top: -15px; right: -15px; width: 22px; height: 15px; line-height: 15px; font-size: 1px; font-weight: 400; co.
CSS实现聊天气泡
CoreCmd的博客
08-06 438
效果图 HTML代码 <a-row :gutter="10"> <a-col :span="24" style="margin-bottom: 10px"> <div class="chat-bubble chat-bubble-left"> <span>收到一条消息</span> </div> </a-col> <a-col :
CSS 如何制作聊天气泡
https://github.com/QAQDFAFD
01-13 818
使用场景：一些介绍性的东西需要在气泡中显示 ，然后用箭头指出来，箭头一般为三角形如上图中气泡一样。
[C#] 简易的聊天气泡(很简单的实现)
诺尔的博客
04-22 1216
效果图 能满足我自己的需求了 直接看代码吧 真的很简单… 这是一个类,直接复制粘贴过去就好,不需要什么引用 class ChatBubble { public ChatBubble(Panel panel, Font font) { if (panel.Controls.Count != 0) thr...
实现微信聊天气泡
Practice makes perfect
07-02 790
思路：聊天气泡组成主要有一个三角形+矩形文本框 对方的气泡 // 三角形 .triangle { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #ffffff;//其他位置边框设为透明，右侧显示就可以实现一个三角形 margin-top: 10
CSS实现气泡聊天框或弹框
aaLiweipeng的博客
06-09 638
三角的方向处理，核心在于border-color的编码， 直接上代码： <!DOCTYPE html> <html> <head> <title>dialog</title> <style type="text/css"> .div { background-colo...
winform仿QQ聊天气泡（c#代码+GDI绘图）
whitemarblelion的博客
03-22 2708
winform仿QQ聊天气泡（纯c#代码）前言最后效果用到的组件步骤部分代码（后台） 前言 最近学习c#编程时突然想自己写一个仿QQ的聊天程序，构思的时候可能没想周全，真正动手时却发现不会的东西太多了，也试过找网上的源码看，然而我这个初学者来说，超过200行的代码就形同天书了，所以只能东拼西凑+自己摸索着写，诸多问题中，如何用winform自带的控件实现聊天气泡算是一个不小的难点了，下面是我自己摸...
css3 微信聊天小尖角,用CSS制作聊天框小尖角、气泡效果
06-08
好的，下面是CSS3实现微信聊天小尖角的具体步骤： 1. 首先，创建一个聊天框的容器。可以使用div元素，并设置其宽度、高度、背景色、边框等样式。 2. 接着，在聊天框容器中创建一个伪元素，用来实现小尖角的效果。可以使用CSS3的:before或:after伪元素。 3. 对伪元素进行样式设置，将其定位在聊天框容器的左上角或右上角，并设置其宽度、高度、背景色等样式。 4. 设置伪元素的border属性，来实现小尖角的效果。需要注意的是，border的宽度要与伪元素的宽度和高度相匹配，才能实现小尖角的形状。 5. 最后，可以对聊天框容器和伪元素进行其他样式设置，来实现不同的聊天气泡效果。 下面是实现微信聊天小尖角的CSS代码示例： ```css .chatBox { position: relative; width: 200px; height: 100px; background-color: #fff; border-radius: 5px; border: 1px solid #ccc; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } .chatBox:before { content: ""; position: absolute; top: -10px; left: 10px; width: 0; height: 0; border-width: 10px; border-style: solid; border-color: transparent transparent #fff transparent; } ``` 在这个代码中，chatBox表示聊天框容器，使用相对定位，并设置了宽度、高度、背景色、边框等样式。chatBox:before表示伪元素，使用绝对定位，并设置了宽度、高度、背景色等样式。其中，border-width、border-style和border-color属性设置了小尖角的形状和颜色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值