当前位置：首页 > CSS

CSS模板制作起泡

2026-01-28 13:54:04CSS

气泡效果实现方法

气泡效果可以通过CSS的伪元素和边框属性实现。以下是一个常见的CSS气泡代码模板：

.bubble {
  position: relative;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
}

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

.bubble:before {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 19px;
  border-width: 11px 11px 0;
  border-style: solid;
  border-color: #ccc transparent;
}

气泡方向调整

通过修改伪元素的定位和边框属性可以改变气泡指向的方向：

/* 顶部气泡 */
.top-bubble:after {
  top: -10px;
  bottom: auto;
  border-width: 0 10px 10px;
}

/* 右侧气泡 */
.right-bubble:after {
  right: -10px;
  left: auto;
  top: 50%;
  margin-top: -10px;
  border-width: 10px 0 10px 10px;
}

/* 左侧气泡 */
.left-bubble:after {
  left: -10px;
  right: auto;
  top: 50%;
  margin-top: -10px;
  border-width: 10px 10px 10px 0;
}

气泡动画效果

添加CSS动画可以让气泡更有活力：

@keyframes bubble {
  0% { transform: scale(0.9); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

.animated-bubble {
  animation: bubble 0.3s ease-out;
}

响应式气泡

使用CSS变量使气泡样式更灵活：

CSS模板制作起泡

:root {
  --bubble-color: #fff;
  --bubble-border: #ccc;
}

.responsive-bubble {
  --bubble-size: 10px;
  position: relative;
  background: var(--bubble-color);
  border: 1px solid var(--bubble-border);
  border-radius: 5px;
  padding: 15px;
}

.responsive-bubble:after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--bubble-size));
  left: 20px;
  border-width: var(--bubble-size) var(--bubble-size) 0;
  border-style: solid;
  border-color: var(--bubble-color) transparent;
}

这些CSS代码片段可以组合使用，根据具体需求调整气泡的大小、颜色、位置和动画效果。通过修改边框宽度和位置参数，可以创建不同形状和大小的气泡效果。