一个CSS创意气泡漂浮动效的实现！

2023-10-07 15:58:05

一个CSS创意气泡漂浮动效的实现！#

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！游戏写了四篇了，多少有点审美疲劳，这一篇呢，我们就尝试写一个纯css的动效，用到了内阴影，滤镜，动画等属性气泡因文字太少，只形成了一行，只有一个气泡，而且看起来太小了，我决定多加几行文字，增加气泡的大小。

/* 气泡容器 */
.bubble-container {
  position: relative;
  width: 400px;
  height: 400px;
}

/* 气泡 */
.bubble {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #ccc;
  filter: drop-shadow(0 0 5px #ccc);
  animation: float 3s infinite alternate;
}

/* 动画 */
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

现在看起来好多了，气泡的数量和大小都增加了，而且还在上下浮动。为了让气泡看起来更逼真，我决定给它添加一些渐变色。

/* 气泡 */
.bubble {
  ...
  background: linear-gradient(to bottom, #fff, #ccc);
  ...
}

现在看起来就更逼真了！气泡的颜色从上到下逐渐变淡，看起来就像真实的肥皂泡一样。最后，我决定再给气泡添加一些随机的旋转动画。

/* 动画 */
@keyframes float {
  ...
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(10deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}