加载动画 · Smart Cow

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

[hidecontent type="vip1"]

<div class="ball"></div>
<div class="shadow"></div>
<style>
/* From Uiverse.io by david-mohseni - Tags: loader */
.ball {
  animation: float612 2.4s ease-in-out infinite;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  position: relative;
  background: radial-gradient( circle at 75% 30%, white 5px, #DF00FF 8%, #DB9EDF 60%, #DF00FF 100%);
  box-shadow: inset 0 0 20px #C1AAC6, inset 10px 0 46px #DF00FF, inset 88px 0px 60px #DB9EDF, inset -20px -60px 100px #fde9ea, inset 0 50px 140px #fde9ea, 0 0 90px #fff;
}

@keyframes float612 {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(-50px);
  }

  100% {
    transform: translatey(0px);
  }
}

.shadow {
  background: #DB9EDF;
  width: 80px;
  height: 25px;
  top: 65%;
  animation: expand6234 2.4s ease-in-out infinite;
  position: absolute;
  border-radius: 50%;
}

@keyframes expand6234 {
  0%,
            100% {
    transform: scale(0.6);
  }

  50% {
    transform: scale(0.3);
    filter: blur(5px);
  }
}

</style>

[/hidecontent]