加载动画 · Bad Parrot

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

[hidecontent type="vip1"]

<div class="moon">
  <div class="shadow"></div>
</div>
<style>
/* From Uiverse.io by JkHuger - Tags: loader */
.moon, .shadow {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgb(216, 216, 216);
  border-radius: 50%;
  height: 50px;
  width: 50px;
}

.shadow {
  width: 50px;
  height: 50px;
  position: relative;
  background: #212121;
 /*Change these color to the bg of your website*/
  transition: all .3s ease;
  animation: move_4123 1.2s infinite alternate ease-in-out;
  transform: translate3d(8px, -8px, 0);
}

@keyframes move_4123 {
  100% {
    transform: translate3d(36px, -36px, 0);
  }
}
</style>

[/hidecontent]