当前位置：首页 > CSS

css制作气泡

2026-01-28 08:01:28CSS

使用 CSS 制作气泡效果

气泡效果通常用于对话框、提示框或注释，可以通过 CSS 的伪元素和边框属性实现。以下是几种常见的实现方法：

基础气泡框

通过 border 和 ::before 或 ::after 伪元素创建三角形箭头：

.bubble {
  position: relative;
  background: #e0f7fa;
  padding: 15px;
  border-radius: 10px;
  max-width: 200px;
  margin: 20px;
}

.bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 20px;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #e0f7fa transparent;
}

带边框的气泡

为气泡添加边框时，需要调整伪元素的位置和颜色：

.bubble-border {
  position: relative;
  background: #fff;
  border: 2px solid #81d4fa;
  padding: 15px;
  border-radius: 10px;
  max-width: 200px;
  margin: 20px;
}

.bubble-border::before,
.bubble-border::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 20px;
  border-width: 10px 10px 0;
  border-style: solid;
}

.bubble-border::before {
  border-color: #81d4fa transparent;
}

.bubble-border::after {
  border-color: #fff transparent;
  bottom: -9px;
  left: 22px;
  border-width: 9px 9px 0;
}

不同方向的气泡

通过调整伪元素的位置和边框方向，可以实现不同指向的气泡：

右侧气泡：

.bubble-right::after {
  left: auto;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #e0f7fa;
}

顶部气泡：

.bubble-top::after {
  bottom: auto;
  top: -10px;
  border-width: 0 10px 10px;
  border-color: transparent transparent #e0f7fa;
}

圆角气泡

使用 clip-path 可以创建更复杂的圆角气泡形状：

.bubble-rounded {
  background: #bbdefb;
  padding: 15px;
  border-radius: 20px;
  max-width: 200px;
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 75%,
    75% 75%, 75% 100%, 50% 75%,
    0% 75%
  );
}

动画气泡

添加简单的动画效果使气泡更生动：

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

.bubble-animate {
  animation: float 3s ease-in-out infinite;
}