如何调整CSS液体动画的波浪高度且不出现静态线条？

问题根源 #

你遇到的静态线条是由于.liquid::before伪元素的圆形边缘与.liquid容器顶部边缘生硬切割导致的，尤其在动态调整liquidHeight时，伪元素位置与容器高度的匹配失衡，出现固定切割线。

修复方案1：调整伪元素尺寸与位置，消除切割边界 #

修改.liquid::before的样式，通过动态计算位置和增大尺寸，让波浪弧度完全融入液体顶部：

.liquid::before {
    content: "";
    position: absolute;
    top: calc(-100% + 5px); /* 动态适配容器高度，避免顶部切割 */
    left: 0;
    width: 200%;
    height: 200%; /* 增大高度，确保波浪弧度完全覆盖顶部区域 */
    background: rgba(255, 255, 255, 0.4);
    border-radius: 45%; /* 改用45%圆角，让波浪更平缓，减少生硬切割 */
    opacity: 0.7;
    animation: wave 6s infinite linear;
    z-index: 1;
}

修复方案2：双波浪叠加，掩盖静态线条 #

添加第二个伪元素::after，设置错位的动画参数，通过双波浪叠加抵消静态线条：

.liquid::after {
    content: "";
    position: absolute;
    top: calc(-100% + 8px);
    left: 0;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 42%;
    opacity: 0.6;
    animation: wave 8s infinite linear reverse; /* 反向动画，错开第一个波浪的周期 */
    z-index: 1;
}

保留原.liquid::before样式即可，双波浪的视觉叠加会掩盖静态切割线。

修复方案3：Angular动态高度适配优化 #

通过CSS变量绑定，让伪元素位置随liquidHeight动态调整：

1. HTML调整：

<div class="tank-container">
  <div class="tank">
      <div class="liquid" [style.height]="liquidHeight" [style.--liquid-top]="getLiquidTop(liquidHeight)"></div>
      <div class="overlay"></div>
  </div>
</div>

2. CSS使用变量：

.liquid::before {
    top: var(--liquid-top, -20px);
    /* 其他原有样式不变 */
}

3. 组件类添加计算方法：

getLiquidTop(height: string): string {
    const heightValue = parseInt(height.replace('%', ''), 10);
    return `calc(-${100 - heightValue}% + 5px)`;
}

额外优化 #

给.liquid顶部添加轻微圆角，进一步弱化切割感：

.liquid {
    /* 原有样式 */
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

内容的提问来源于stack exchange，提问作者Saurabh