使用 HTML 和 CSS 创建动画背景

0 Shares

为你的网站或应用添加动态背景，能够塑造独特且引人入胜的视觉效果。富有创意的背景能够激发情感共鸣，并显著提升用户体验。

实现应用动态背景的方法多种多样，而纯粹利用HTML和CSS的组合，便能产生出色的效果。本文将通过一个示例，深入剖析其代码实现原理，并展示最终动态背景的实际效果。

构建HTML结构

我们将创建一个带有蓝色背景，并伴随气泡放大并向上浮动的效果。你可以在CodePen上查看最终的实现结果。

首先，创建一个带有类名为“wrapper”的section元素，作为动画的容器。

接着，创建10个div元素，它们将作为气泡。在每个div元素内部，使用一个带有类名为“dot”的span元素。如果你是HTML新手，你可以在10分钟内学会这些基础的HTML标签。

 <body>
  <section class="wrapper">
    <h1>Animated Background</h1>
    <div><span class="dot"></span></div>
    <div><span class="dot"></span></div>
    <div><span class="dot"></span></div>
    <div><span class="dot"></span></div>
    <div><span class="dot"></span></div>
    <div><span class="dot"></span></div>
    <div><span class="dot"></span></div>
    <div><span class="dot"></span></div>
    <div><span class="dot"></span></div>
    <div><span class="dot"></span></div>
  </section>
</body>

使用CSS代码进行样式设计

仅仅使用HTML就能创造出令人赞叹的背景效果。不过，在这个项目中，我们将借助CSS来设置背景的样式和动画。

首先，将边距和填充都设置为0，以确保背景周围不会出现空白。

 * {
  margin: 0;
  padding: 0;
}

然后，使用wrapper类来设置父容器的样式。这个容器将占据整个页面的100%宽度和高度。将其背景色设置为蓝色，并赋予它绝对定位。

 .wrapper {
  height: 100%;
  width: 100%;
  background-color: #0066cc;
  position: absolute;
}

h1元素也采用绝对定位。为了将其放置在页面正中央，首先将其左上角位置设置为50%。然后使用平移（transform: translate）将其向上和向左移动，使其中心点正好位于页面中间。

 .wrapper h1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  font-family: sans-serif;
  word-spacing: 2px;
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
}

接下来，设置圆形div元素的样式，它们将充当动画气泡。为每个div指定高度、宽度和边框。较大的边框半径确保边框呈圆形。此外，使用CSS的动画属性设置动画持续时间。

 .wrapper div {
  height: 60px;
  width: 60px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 100px;
  position: absolute;
  top: 10%;
  left: 10%;
  animation: 4s linear infinite;
}

设置点的样式为5像素的高度和宽度。为这些点指定边框半径和白色背景。将每个点绝对定位，靠近其父div的右上角。

 div .dot {
  height: 5px;
  width: 5px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 20%;
  right: 20%;
}

然后，使用nth-child选择器，为每个div设置不同的初始位置和动画时长。你可以在稍后使用@keyframes来定义动画效果，这里我们将其命名为“animate”。

由于.wrapper元素的第一个子元素是h1，因此使用nth-child(2)来选取第一个div元素。

 .wrapper div:nth-child(2) {
  top: 20%;
  left: 20%;
  animation: animate 8s linear infinite;
}.wrapper div:nth-child(3) { 
  top: 60%;
  left: 80%;
  animation: animate 10s linear infinite;
}
.wrapper div:nth-child(4) { 
  top: 40%;
  left: 40%; 
  animation: animate 3s linear infinite;
}
.wrapper div:nth-child(5) {
  top: 66%;
  left: 30%;
  animation: animate 7s linear infinite;
}
.wrapper div:nth-child(6) {
  top: 90%;
  left: 10%;
  animation: animate 9s linear infinite;
}

你可以为较低位置的div设置较高的初始y轴百分比，以便它们以不同的时间间隔向上浮动。

 .wrapper div:nth-child(7) {
  top: 30%;
  left: 60%;
  animation: animate 5s linear infinite;
}.wrapper div:nth-child(8) {
  top: 70%;
  left: 20%;
  animation: animate 8s linear infinite;
}
.wrapper div:nth-child(9) {
  top: 75%;
  left: 60%;
  animation: animate 10s linear infinite;
}
.wrapper div:nth-child(10) {
  top: 50%;
  left: 50%;
  animation: animate 6s linear infinite;
}
.wrapper div:nth-child(11) {
  top: 45%;
  left: 20%;
  animation: animate 10s linear infinite;
}

使用@keyframes以不同的间隔逐渐改变和旋转圆圈和点。在下面的代码中，点旋转70度，圆圈旋转360度。这种旋转创建了气泡的效果。

 @keyframes animate {
  0% {
    transform: scale(0) translateY(0) rotate(70deg);
  }
  100% {
    transform: scale(1.3) translateY(-100px) rotate(360deg);
  }
}

你可以使用CSS图案来增强背景的时尚感。图案允许你创建波浪、网格、树叶和其他纹理，从而帮助你创造出惊艳的动画效果。

你可以使用CSS为多种属性设置动画

你可以使用CSS来创建各种类型的动画，包括更改背景颜色、设置动画延迟执行的时间。

你还可以设置动画执行的频率，甚至可以使其无限循环。此外，你还可以设置动画的运动方向：向前或向后。使用动画是一件非常有趣的事情，你可以运用它们让你的应用程序变得生动活泼。