加载动画 · Great Horse

类型：组件　·　分类：加载动画　·　收录：2026-09-19　·　源码：会员可见

[hidecontent type="vip1"]

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

<style>
/* From Uiverse.io by jeremyssocial  - Tags: 3d, hover, loader, cube, click, hover effect, click effect, 3d loader */
.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10em;
  perspective: 800px;
}

.loader-cube {
  position: relative;
  width: 5em;
  height: 5em;
  transform-style: preserve-3d;
  animation: rotateCube 2s infinite linear;
}

.loader-side {
  position: absolute;
  width: 5em;
  height: 5em;
  background: #333; /* Custom property for theming */
  border: 0.1em solid #fff; /* Relative sizing for border */
}

.front {
  transform: translateZ(2.5em);
}
.back {
  transform: rotateY(180deg) translateZ(2.5em);
}
.right {
  transform: rotateY(90deg) translateZ(2.5em);
}
.left {
  transform: rotateY(-90deg) translateZ(2.5em);
}
.top {
  transform: rotateX(90deg) translateZ(2.5em);
}
.bottom {
  transform: rotateX(-90deg) translateZ(2.5em);
}

/* Keyframes for continuous rotation */
@keyframes rotateCube {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

/* Interactive states using pseudo-classes */
.loader-side:hover {
  background: #555; /* Darker shade on hover */
}

.loader-side:focus {
  border: 0.1em solid #999; /* Different border color on focus */
}

.loader-side:active {
  opacity: 0.8; /* Slight transparency on active */
}

</style>
    

[/hidecontent]