CSS实现聊天气泡

最新推荐文章于 2024-12-25 08:00:31 发布

原创最新推荐文章于 2024-12-25 08:00:31 发布 · 772 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

前端专栏收录该内容

12 篇文章

订阅专栏

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

效果图

在这里插入图片描述

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;
}