三色融合球：一个有趣的 CSS 3D 加载动画

2023-10-13 20:36:54

三色融合球加载动画：为你的网站增添活力

**子
在等待网页加载时，传统的加载条已经变得单调乏味。相反，为什么不使用三色融合球加载动画来为你的网站注入一些视觉趣味呢？这个迷人的动画由三个旋转变形的小球组成，它们融合在一起，然后循环往复。它不仅美观，而且是一个完美的加载指示器。

HTML 代码

我们的旅程从编写 HTML 代码开始：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
  </div>
</body>
</html>

CSS 代码

接下来，让我们添加一些 CSS 样式：

/* 容器 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

/* 球体 */
.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #000;
  margin: 10px;
  animation: ball-animation 2s infinite alternate;
}

/* 动画 */
@keyframes ball-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

SVG 代码

最后，我们需要一个 SVG 形状来创建球体：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="50px" height="50px">
  <circle cx="25" cy="25" r="25" fill="#000" />
</svg>

融合效果

就是这样！通过结合这三种代码，我们创造了一个令人着迷的三色融合球加载动画。小球将变形旋转并融合到一起，营造出一种视觉盛宴，让你的访客在等待网页加载时保持兴趣。

常见问题解答

这个动画适用于所有浏览器吗？
是的，这个动画使用 CSS 和 SVG，它们与大多数现代浏览器兼容。
我可以自定义球体的颜色和大小吗？
当然！你可以修改 CSS 代码中 .ball 的 background-color 和 width / height 属性。
动画可以在移动设备上平滑运行吗？
是的，这个动画在移动设备上运行良好，因为使用了轻量级的 SVG 和 CSS 动画。
我可以将这个动画用于商业网站吗？
是的，这个动画是免费且开源的，你可以将其用于任何个人或商业项目。
在哪里可以找到更多类似的加载动画？
网上有许多资源提供了各种加载动画，你可以探索和选择最适合你的网站的动画。