CSS 的魅力！让气球随风摇曳

2023-12-11 14:09:45

CSS实现漂浮的气球

气球作为一种常见的装饰元素，常用于节日、生日、婚礼等场合，而利用CSS可以轻松实现气球的漂浮效果，让你的网页更加生动有趣。

页面结构

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

初始样式

.container {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.balloon-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.balloon {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #f44336;
  position: relative;
  animation: float 3s infinite alternate;
}

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

气球承载盒子

为了让气球漂浮起来，我们需要一个承载它的盒子。这个盒子使用绝对定位，使其能够在页面上自由移动。

气球实现

气球使用border-radius实现圆形，并通过background属性设置颜色。position属性设置为relative，以便可以对气球进行动画处理。

气球阴影实现

为了让气球看起来更加逼真，我们需要为它添加阴影。阴影可以使用box-shadow属性来实现。

.balloon {
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

气球漂浮实现

气球的漂浮效果是通过@keyframes动画实现的。动画的关键帧定义了气球在不同时间点的位移，从而形成漂浮的效果。

气球阴影变化实现

为了让气球的阴影随着漂浮效果而变化，我们需要在动画的关键帧中同时更新阴影的位置。

@keyframes float {
  0% {
    transform: translate(0, 0);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  }
  50% {
    transform: translate(0, -20px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  }
  100% {
    transform: translate(0, 0);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  }
}

代码片段

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

.container {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.balloon-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.balloon {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #f44336;
  position: relative;
  animation: float 3s infinite alternate;
}

@keyframes float {
  0% {
    transform: translate(0, 0);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  }
  50% {
    transform: translate(0, -20px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  }
  100% {
    transform: translate(0, 0);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  }
}