加载动画 · Rude Shrimp

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

[hidecontent type="vip1"]

<div class="milk-loader">
  <div class="glass">
    <div class="milk"></div>
  </div>
</div>

<style>
/* From Uiverse.io by jeremyssocial  - Tags: animation, white, loader, effect loader */
.milk-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.glass {
  position: relative;
  width: 100px;
  height: 150px;
  background-color: transparent;
  border: 3px solid #666;
  border-radius: 10px 10px 35px 35px;
  overflow: hidden;
}

.milk {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0;
  background-color: #fff;
  border-radius: 5px 5px 30px 30px;
  animation: fillMilk 2s ease-in-out infinite;
}

/* Keyframes to animate the milk in a non-uniform way, simulating a filling glass */
@keyframes fillMilk {
  0%,
  100% {
    height: 10%;
    border-radius: 5px 5px 30px 30px;
  }
  50% {
    height: 80%;
    border-radius: 25px;
  }
}

</style>
    

[/hidecontent]