当前位置：首页 > CSS

css制作气球

2026-02-13 02:28:13CSS

CSS 制作气球效果

使用 CSS 可以轻松创建气球形状，通常通过 border-radius 和伪元素实现悬浮效果。

基础气球形状

.balloon {
  width: 100px;
  height: 120px;
  background-color: #ff5a5a;
  border-radius: 50%;
  position: relative;
}

添加气球底部尖角 通过伪元素 ::after 创建气球的尖端：

.balloon::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 15px solid #ff5a5a;
}

添加悬浮线 使用另一个伪元素或额外元素模拟气球线：

.balloon::before {
  content: '';
  position: absolute;
  bottom: -50px;
  left: 50%;
  width: 2px;
  height: 50px;
  background-color: #ccc;
  transform: translateX(-50%);
}

动画效果 添加上下浮动的动画增强真实感：

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}
.balloon {
  animation: float 3s ease-in-out infinite;
}

完整示例

<div class="balloon"></div>

.balloon {
  width: 100px;
  height: 120px;
  background: radial-gradient(circle at 30% 30%, #ff8a8a, #ff5a5a);
  border-radius: 50%;
  position: relative;
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.1);
  animation: float 3s ease-in-out infinite;
}
.balloon::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 15px solid #ff5a5a;
}
.balloon::before {
  content: '';
  position: absolute;
  bottom: -50px;
  left: 50%;
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, #ccc, transparent);
  transform: translateX(-50%);
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

进阶技巧