CSS实现聊天气泡

最新推荐文章于 2024-07-14 14:29:26 发布

CoreCmd

最新推荐文章于 2024-07-14 14:29:26 发布

阅读量513

点赞数 1

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/MasterAjoe/article/details/119459870

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用HTML和CSS创建聊天界面中的气泡效果，包括左右两侧不同方向的气泡以及带有渐变背景的主消息气泡。CSS定义了气泡的样式，包括边框、阴影、内填充、文字对齐、过渡效果以及不同方向气泡的三角形箭头。此外，还提供了两种不同颜色的主题：普通和主要。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

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 :span="24" style="margin-bottom: 10px">
        <div class="chat-bubble chat-bubble-left">
          <span>收到一条消息收到一条消息收到一条消息收到一条消息收到一条消息收到一条消息收到一条消息收到一条消息</span>
        </div>
      </a-col>
      <a-col :span="24" style="margin-bottom: 10px">
        <div class="chat-bubble chat-bubble-left">
          <span>收到一条消息收到一条消息收到一条消息收到一条消息收到一条消息</span>
        </div>
      </a-col>
      <a-col :span="24" style="margin-bottom: 10px">
        <div class="chat-bubble chat-bubble-right chat-bubble-primary">
          <span>发送一条消息</span>
        </div>
      </a-col>
      <a-col :span="24" style="margin-bottom: 10px">
        <div class="chat-bubble chat-bubble-right chat-bubble-primary">
          <span>发送一条消息发送一条消息发送一条消息发送一条消息发送一条消息发送一条消息发送一条消息发送一条消息发送一条消息</span>
        </div>
      </a-col>
    </a-row>

CSS样式

.chat-bubble{
  color: #333;
  border-radius: 5px;
  box-shadow: 3px 5px 15px rgba(0,0,0,.2);
  padding: 5px 10px;
  width: auto;
  max-width: 50%;
  text-align: left;
  display: inline-block !important;
  position: relative;
  word-break:break-all;
  background-color: #ffffff;
  transition: all .2s;
  cursor: pointer;
}
.chat-bubble:hover{
  transform: scale(1.03);
}
.chat-bubble-left{
  float: left;
}
.chat-bubble-left:before{
  content: '';
  width: 10px;
  height: 10px;
  left: -10px;
  top: calc(50% - 5px);
  position: absolute;
  border-left: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  border-right: 5px solid #ffffff;
}
.chat-bubble-right{
  float: right;
}
.chat-bubble-right:after{
  content: '';
  width: 10px;
  height: 10px;
  right: -10px;
  top: calc(50% - 5px);
  position: absolute;
  border-left: 5px solid #ffffff;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  border-right: 5px solid transparent;
}
/**
   chat-bubble-primary
 */
.chat-bubble-left.chat-bubble-primary{
  background:linear-gradient(90deg,#2b92e4, #30a1dc) !important;
  color: #ffffff !important;
}
.chat-bubble-left.chat-bubble-primary:before{
  border-right: 5px solid #2b92e4 !important;
}
.chat-bubble-right.chat-bubble-primary{
  background:linear-gradient(90deg,#30a1dc,#2b92e4) !important;
  color: #ffffff !important;
}
.chat-bubble-right.chat-bubble-primary:after{
  border-left: 5px solid #2b92e4 !important;
}
/**
   chat-bubble-success
 */
.chat-bubble-left.chat-bubble-success{
  background:linear-gradient(90deg,#4caf50, #66b869) !important;
  color: #ffffff !important;
}
.chat-bubble-left.chat-bubble-success:before{
  border-right: 5px solid #4caf50 !important;
}
.chat-bubble-right.chat-bubble-success{
  background:linear-gradient(90deg, #66b869,#4caf50) !important;
  color: #ffffff !important;
}
.chat-bubble-right.chat-bubble-success:after{
  border-left: 5px solid #4caf50 !important;
}