加载动画 · Dry Insect

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

[hidecontent type="vip1"]

<span class="loader"></span>

<style>
/* From Uiverse.io by mobinkakei  - Tags: loading, loader, space */
.loader {
  position: relative;
  width: 60px;
  height: 60px;
  background: #a19dad;
  transform: rotateX(65deg) rotate(45deg);
  // remove bellows command for perspective change
  //transform: perspective(200px) rotateX(65deg) rotate(45deg);
  color: #fff;
  animation: layers1 1s linear infinite alternate;
}
.loader:after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  animation: layerTr 1s linear infinite alternate;
}

@keyframes layers1 {
  0% {
    box-shadow: 0px 0px 0 0px;
  }
  90%,
  100% {
    box-shadow: 20px 20px 0 -4px;
  }
}
@keyframes layerTr {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-25px, -25px) scale(1);
  }
}

</style>
    

[/hidecontent]