当前位置：首页 > CSS

css制作气球

2026-01-28 08:02:51CSS

使用CSS制作气球效果

通过CSS的border-radius、box-shadow和伪元素可以实现气球效果。以下是实现方法：

基础气球形状

.balloon {
  width: 100px;
  height: 120px;
  background-color: #ff6b6b;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: relative;
  box-shadow: inset -10px -10px 10px rgba(0,0,0,0.1);
}

添加气球结

.balloon::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  width: 10px;
  height: 15px;
  background-color: #ff6b6b;
  transform: translateX(-50%);
  border-radius: 0 0 5px 5px;
}

气球飘带效果

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

动画效果（可选）

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

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

多色气球变体 通过修改background-color属性可创建不同颜色气球：

红色: #ff6b6b
蓝色: #4dabf7
黄色: #ffd43b
绿色: #40c057

进阶气球效果

3D气球效果 添加CSS渐变和更复杂的阴影：

.balloon-3d {
  background: radial-gradient(
    circle at 30% 30%,
    #ffffff,
    #ff6b6b 70%,
    #e03131
  );
  box-shadow: 
    inset -15px -15px 20px rgba(0,0,0,0.1),
    5px 5px 15px rgba(0,0,0,0.3);
}

气球组布局

<div class="balloons">
  <div class="balloon red"></div>
  <div class="balloon blue"></div>
  <div class="balloon yellow"></div>
</div>

<style>
.balloons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.balloon {
  /* 基础样式 */
}

.red { background-color: #ff6b6b; }
.blue { background-color: #4dabf7; }
.yellow { background-color: #ffd43b; }
</style>

这些CSS技术可以创建出逼真的气球效果，适用于网页装饰、庆祝页面等场景。通过调整尺寸、颜色和动画参数，可以实现各种定制化气球设计。

css制作气球