📌  相关文章
📜  如何使用 HTML5 和 CSS3 制作气泡背景？(1)

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

如何使用 HTML5 和 CSS3 制作气泡背景？

气泡背景是一种非常受欢迎的背景设计样式，可以为网站或应用程序添加一个有趣和互动性的元素。下面是如何使用HTML5和CSS3来制作气泡背景的步骤。

步骤1：创建HTML文件

创建一个HTML5文件，并在文件中添加一个div元素，该元素将成为气泡背景的容器。代码片段如下：

<div class="bubble-container"></div>
步骤2：添加CSS样式

为了向容器中添加气泡背景，我们必须在CSS中设置以下样式属性：

  1. 设置容器的宽度和高度属性。
  2. 设置容器的背景颜色和背景图像属性，其中背景图像是指气泡的图片。
  3. 设置每个气泡的位置和大小属性。
.bubble-container {
  width: 100%;
  height: 100%;
  background-color: #fff;
  background-image: url(bubble.png);
  background-repeat: repeat;
  position: relative;
}

.bubble {
  position: absolute;
  background-color: transparent;
  border-radius: 50%;
  animation: float 6s infinite ease-in-out;
}

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

.bubble-1 {
  width: 30px;
  height: 30px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.bubble-2 {
  width: 10px;
  height: 10px;
  top: 20%;
  left: 20%;
  animation-delay: 1s;
}

.bubble-3 {
  width: 20px;
  height: 20px;
  top: 30%;
  left: 30%;
  animation-delay: 2s;
}

/* 以此类推 */
步骤3：创建气泡元素

现在我们需要为容器创建气泡元素，每个气泡都是一个div元素，并且都有一个唯一的class属性。代码片段如下：

<div class="bubble bubble-1"></div>
<div class="bubble bubble-2"></div>
<div class="bubble bubble-3"></div>

每个气泡都有相同的类“bubble”，并带有不同的气泡编号。这样做是为了方便我们在CSS中添加类似的样式，从而为每个气泡设置位置和大小。

步骤4：运行并检查代码

现在我们可以运行代码并查看气泡背景。在浏览器中打开HTML文件，应该会看到一个有趣的气泡背景。如果您需要对颜色和位置进行任何更改，只需编辑CSS样式即可。

代码片段：

<!DOCTYPE html>
<html>
<head>
	<style>
		.bubble-container {
			width: 100%;
			height: 100%;
			background-color: #fff;
			background-image: url(bubble.png);
			background-repeat: repeat;
			position: relative;
		}

		.bubble {
			position: absolute;
			background-color: transparent;
			border-radius: 50%;
			animation: float 6s infinite ease-in-out;
		}

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

		.bubble-1 {
			width: 30px;
			height: 30px;
			top: 10%;
			left: 10%;
			animation-delay: 0s;
		}

		.bubble-2 {
			width: 10px;
			height: 10px;
			top: 20%;
			left: 20%;
			animation-delay: 1s;
		}

		.bubble-3 {
			width: 20px;
			height: 20px;
			top: 30%;
			left: 30%;
			animation-delay: 2s;
		}
	</style>
</head>
<body>
	<div class="bubble-container">
		<div class="bubble bubble-1"></div>
		<div class="bubble bubble-2"></div>
		<div class="bubble bubble-3"></div>
	</div>
</body>
</html>