纯CSS制作炫酷粘性气泡效果

纯CSS制作炫酷粘性气泡效果

在 UI 设计中，一些创意独特的动态效果往往能给用户带来眼前一亮的感觉。而这种炫酷的粘性气泡效果正是如此。

这种特殊融合效果十分引人注目，并且不使用 JavaScript，而是通过纯 CSS 来实现的。下面，我们将一步一步地解析如何使用 CSS 来实现这种效果。

1. HTML 结构

首先，我们需要创建一个基本的 HTML 结构。

<div class="container">
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
</div>

在这里，我们将 <div class="container"> 作为气泡容器，而 <div class="bubble"> 则是单个气泡。您可以根据需要添加任意数量的气泡。

2. CSS 样式

接下来，我们添加一些 CSS 样式来实现气泡效果。

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

.bubble {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  animation: bubble-animation 5s infinite alternate;
}

@keyframes bubble-animation {
  0% {
    top: -100px;
    left: calc(50% - 50px);
  }
  50% {
    top: calc(100vh - 100px);
  }
  100% {
    top: -100px;
    left: calc(50% - 50px);
  }
}

在上面的 CSS 代码中，我们首先设置容器的样式，使其占据整个视窗。然后，我们设置气泡的样式，使其具有圆形的外观和适当的阴影效果。接下来，我们定义了气泡的动画，使其在视窗内上下移动。

3. 实现气泡融合效果

现在，我们来实现气泡之间的融合效果。

.bubble:hover {
  animation-play-state: paused;
  transform: scale(1.2);
  z-index: 99;
}

.bubble:hover ~ .bubble {
  animation-play-state: paused;
  transform: scale(0.8);
  z-index: 98;
}

这段 CSS 代码使用了 :hover 伪类来实现气泡之间的交互。当鼠标悬停在气泡上时，它将暂停动画、放大气泡并将其置于所有其他气泡之上。同时，其他气泡也将暂停动画、缩小并降低其 z-index。

这种交互效果创造了一种独特的气泡融合效果，使它们看起来像是在相互融合。

4. 完善细节

为了让效果更加完美，我们还可以添加一些额外的细节。

body {
  background-color: #f5f5f5;
}

.container {
  overflow: hidden;
}

.bubble {
  transition: all 0.3s ease-in-out;
}

在这里，我们设置了页面的背景颜色，隐藏容器的溢出，并为气泡添加了平滑的过渡效果。这些细节有助于增强整体效果的视觉体验。

结语

现在，您已经学会了如何使用纯 CSS 来实现炫酷的粘性气泡效果。这种效果非常适合用于创建引人注目的背景动画或其他交互式元素。

我希望本教程对您有所帮助。如果您有任何问题或建议，请随时在评论区留言。