Как отрегулировать высоту волны в жидкой анимации CSS без появления статической линии? ⇐ CSS

[Anonymous]

Я работаю над анимацией топливного бака с эффектом волны, используя Angular. Эффект волны создается с помощью псевдоэлемента ::before в элементе div .liquid. Анимация выглядит великолепно, но есть проблема: когда я регулирую высоту или положение волны, в верхней части волны появляется статическая линия, создавая неестественный эффект.

Код: Выделить всё

.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);
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/791 ... ine-appear