瓶内水面起伏上涨，适合百分比类加载场景
← 返回 加载 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .wfl{height:150px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:26px}
.fx .wfl .btl{position:relative;width:90px;height:110px;border:3px solid #4a9eff;border-radius:12px;overflow:hidden}
.fx .wfl .btl::before{content:"";position:absolute;left:-50%;bottom:-40px;width:200%;height:110px;border-radius:45%;background:rgba(74,158,255,.55);animation:kfx-wfl 4s ease-in-out infinite}
.fx .wfl .btl::after{content:"";position:absolute;left:-50%;bottom:-30px;width:200%;height:110px;border-radius:45%;background:rgba(74,158,255,.25);animation:kfx-wfl 3s ease-in-out infinite reverse}
@keyframes kfx-wfl{to{transform:translateX(24%) rotate(8deg)}}<div class="fx">
<div class="wfl"><div class="btl"></div></div>
</div>