How to Adjust Wave Height in a CSS Liquid Animation Without a Static Line Appearing?

I'm working on a fuel tank animation with a wave effect using in Angular. The wave effect is created using a ::before pseudo-element on a .liquid div. The animation looks great, but there is an issue: when I adjust the wave height or position, a static line appears at the top of the wave, creating an unnatural effect.


.tank-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f2f2f2;
}

.tank {
position: relative;
width: 200px;
height: 250px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.05); /* Decreased opacity for more realistic glass */
box-shadow:
0px 8px 30px rgba(0, 0, 0, 0.25), /* Deeper outer shadow for depth */
inset 0 0 20px rgba(255, 255, 255, 0.2); /* Softer inner light reflection */
backdrop-filter: blur(10px); /* Slightly stronger glass blurring effect */
border: 1px solid rgba(255, 255, 255, 0.15); /* More subtle glass border */
overflow: hidden;
}

.liquid {
position: absolute;
bottom: 0;
width: 100%;
height: 50%; /* Fuel level */
background: linear-gradient(180deg, rgba(249, 212, 35, 0.9), rgba(194, 78, 0, 0.95)); /* Richer color for diesel effect */
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
overflow: hidden;
}

.liquid::before {
content: "";
position: absolute;
top: -20px; /* Adjust to create wave effect near the top */
left: 0;
width: 200%;
height: 40px;
background: rgba(255, 255, 255, 0.4); /* Increased opacity for more definition */
border-radius: 50%;
opacity: 0.7; /* Adjusted for more prominence */
animation: wave 6s infinite linear;
z-index: 1;
}

@keyframes wave {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-25%); /* Move partially to the left */
}
50% {
transform: translateX(-50%); /* Move fully to the left */
}
75% {
transform: translateX(-25%); /* Move partially back to the right */
}
100% {
transform: translateX(0); /* Return to the starting position */
}
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1); /* Light glassy sheen on top */
border-radius: 20px;
backdrop-filter: blur(5px); /* More pronounced glass distortion */
pointer-events: none;
}

.tank::before {
content: "";
position: absolute;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3); /* Increased opacity for more reflection */
box-shadow:
inset 1px 1px 5px rgba(255, 255, 255, 0.5), /* Increased shadow for depth */
2px 2px 10px rgba(0, 0, 0, 0.3); /* Deeper outer shadow */
}

.tank::after {
content: "";
position: absolute;
top: 10px;
right: 10px;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
}

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

Continue reading...