cómo están?.
Tengo una animación en CSS tomada otro sitio web la cual simula un tanque de agua llenándose, esta animación está hecha con un radial-gradient
, mi aplicación web es responsiva y estoy usando media queries para variar el tamaño de la elipse interna que forma el oleaje debido a que el efecto de llenado debe ajustarse al nuevo tamaño del tanque.
Lo cierto que es que eso no ocurre y el llenado del tanque se me muestra de forma correcta solo en uno de los tamaños de pantalla, en los otros dos el efecto de llenado queda incompleto.
La estructura de mi página es como sigue
<!DOCTYPE html>
<html>
<head>
</html>
<body>
<div>
....
</div>
<div>
....
</div>
<div>
<div>
<div>
<div class="bloque_dash">
<div class="titulo_2"
<div class="titulo_2">
<h2>...</h2>
</div>
</div>
<div class="contenido">
<div class="box">
<div class="tile01">...</div>
</div>
</div>
</div>
</div>
</body>
</html>
los estilos que me manejan el background con su posición y la animación son los siguientes
* {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/*-----Transiciones------*/
--tran-02: all 0.2s ease;
--tran-03: all 0.3s ease;
--tran-04: all 0.4s ease;
--tran-05: all 0.5s ease;
}
.cuerpo_sistema .controles_sistema .bloque_dash .contenido .box{
margin: 0 auto;
width:100%;
height:95%;
border-radius:20px;
border:5px solid #111111;
background-color: none;
position: relative;
}
.cuerpo_sistema .controles_sistema .bloque_dash .contenido .box .tile01 {
margin: auto;
width:100%;
height:100%;
background: -webkit-radial-gradient(center 0px,800px 2500px, #111111 10%, #0099ff 10.4%);
background-size:40px 200%;
background-attachment: local;
border-radius: 12px;
background-clip: border-box;
background-position:0px 100%;
animation-name: wave-animation;
animation-duration: 3s;
animation-iteration-count:infinite;
animation-timing-function: linear;
}
@keyframes wave-animation
{
0% {
background-position: 0px 0%;
}
50% {
background-position: 40px 50%;
}
100% {
background-position: 80px 100%;
}
}
inicialmente pensé que haciendo el background-size con una dimensión vertical de 200% sería suficiente para que el gradiente radial se ajustara pero no funcionó; lo siguiente que hice fue variar el radio vertical del gradiente radial para intentar resolver mi problema ya que con eso se me modificaría el tamaño de la imagen formada por el gradiente radial, el problema es que al aplicar esto último dentro del media query correspondientes entonces no hace nada y si observo en el developer tools, esa modificación en el media query aparece tachada como se puee observar en la siguiente imagen
estuve buscando en la red y en algún lado encontré una explicación según la cual, al ser un gradiente radial un tipo de imagen, esta no puede ser modificada en un media query ya que los media queries solo sirven para modificar reglas básicas como colores o dimensiones.
Entonces, cómo podría resolver esto?
Gracias de antemano por la ayuda brindada.