css热气球样式

热气球是一种很有特色的交通工具，现在我们可以用CSS来实现一个立体的热气球样式。

.balloon {
  position: relative;
  width: 80px;
  height: 120px;
  background: #f7c031;
  border-radius: 50%;
  margin: 50px auto 0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.balloon:before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: #f7c031;
  border-radius: 50%;
}
.balloon:after {
  content: '';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-top: 30px solid #f7c031;
  border-bottom: 20px solid transparent;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}
 

这个样式主要是利用了伪元素来实现热气球的下拉绳索和左右两侧的胶囊形状。关键是要掌握伪元素的使用技巧和定位方法。

同时，也可以添加动画效果，让热气球飘浮起来，具有更好的视觉效果。

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

这个样式还可以根据需求进行修改，比如添加气球的绳子，改变颜色和大小等等。