如何使用 CSS 创建弹跳气泡效果？(1)

📌 相关文章

📜 如何使用 CSS 创建弹跳气泡效果？(1)

📅 最后修改于: 2023-12-03 15:08:17.811000 🧑 作者: Mango

如何使用 CSS 创建弹跳气泡效果？

动态的弹跳气泡效果可以为您的网站或应用程序带来更多的趣味性。使用 CSS 创建弹跳气泡效果是一种简单且有效的方法。本文将向您介绍如何实现这种效果。

准备工作

在开始之前，请确保您已经具备以下两个文件：

HTML 文件
CSS 文件

创建弹跳气泡

首先，在 HTML 文档中创建一个 <div> 元素作为容器，用于放置弹跳气泡。

在 CSS 文件中，对该 <div> 元素进行样式设置，包括设置其宽度、高度、颜色和位置等信息。

.bubble {
  width: 50px;
  height: 50px;
  background-color: #ff4d4d;
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

接下来，创建一个动画效果，用于实现弹跳气泡的动态效果。
```
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-100px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}
```
在上面的代码中，我们定义了一个名为 bounce 的动画效果，该效果使用了 transform 属性，并分别指定了 0% 到 100% 不同时间点上的偏移量（即位置变化）。这样，我们就可以使用 bounce 这个动画效果来触发弹跳气泡的动态效果。
最后，将刚才定义的动画效果应用到我们创建的 <div> 元素上。
```
.bubble {
  /* 其他 CSS 样式 */
  animation: bounce 2s infinite;
}
```
通过 animation 属性，我们将 bounce 这个动画效果应用到了我们创建的 <div> 元素上，并设定了动画时长为 2s，循环次数为无限次重复。

完成

现在，您可以在浏览器中查看您的网页，看到应用了 CSS 弹跳气泡效果的页面！此时您已成功实现了弹跳气泡效果。

完整代码

HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Bouncing Bubble</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="bubble"></div>
  </body>
</html>

CSS 代码：

.bubble {
  width: 50px;
  height: 50px;
  background-color: #ff4d4d;
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-100px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}