使用 HTML 和 CSS 的发光立方体加载器

在网页设计中，加载动画是一个非常重要的元素。使用 HTML 和 CSS，我们可以轻松地创建有趣和独特的加载动画。本文将介绍如何创建一个酷炫的发光立方体加载器。

效果演示

HTML

首先，我们需要使用 HTML 创建一个立方体的模板。我们将使用 div 元素来创建立方体的各个面。这是必须的，因为我们需要以后方便地使用 CSS 来控制它们的样式。下面是我们的 HTML 代码：

<div class="cube-loader">
  <div class="cube-loader__face cube-loader__face--front"></div>
  <div class="cube-loader__face cube-loader__face--back"></div>
  <div class="cube-loader__face cube-loader__face--right"></div>
  <div class="cube-loader__face cube-loader__face--left"></div>
  <div class="cube-loader__face cube-loader__face--top"></div>
  <div class="cube-loader__face cube-loader__face--bottom"></div>
</div>

我们将所有的外观特性定义到 CSS 样式表中。

CSS

立方体需要 6 个面。对于每个面，我们需要定义一个 class。这些类的名称符合立方体的六个面前、后、左、右、上、下。当我们加载页面时，我们给立方体添加一个动画效果，在这个过程中立方体会不断旋转，看起来非常酷炫。

在 CSS 中我们可以使用 @keyframes 关键字来定义动画的过程，我们定义了一个名为 spin_cube 的动画，它将让立方体不停地旋转。我们还应用了一些渐变效果和边框阴影来使立方体有光泽感和立体感。

下面是完整的 CSS 代码：

.cube-loader {
  display: inline-block;
  margin: 0 auto;
  position: relative;
  transform: rotate(-45deg);
  transform-style: preserve-3d;
  perspective: 1000px;
  width: 60px;
  height: 60px;
}

.cube-loader__face {
  border: 4px solid #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 10px rgba(255, 255, 255, 0.5);
  position: absolute;
  height: 50px;
  width: 50px;
}

.cube-loader__face--front {
  transform: translateZ(25px);
}

.cube-loader__face--back {
  transform: rotateY(180deg) translateZ(25px);
}

.cube-loader__face--right {
  transform: rotateY(90deg) translateZ(25px);
}

.cube-loader__face--left {
  transform: rotateY(-90deg) translateZ(25px);
}

.cube-loader__face--top {
  transform: rotateX(-90deg) translateZ(25px);
}

.cube-loader__face--bottom {
  transform: rotateX(90deg) translateZ(25px);
}

@keyframes spin_cube {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }

  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

.cube-loader {
  animation: spin_cube 2s infinite linear;
}

最后，我们将立方体的六个面分别应用到 div 元素的 class 中，为立方体赋予颜色和立体感。

总结

使用 HTML 和 CSS 创建一个酷炫的加载动画并不难。我们刚刚完成的立方体加载器只需要几行 HTML 和 CSS 代码，就能让网页更加生动有趣，给用户带来更好的体验。