¡Hola!Hola compañer@s... Quisier lograr alguna animación al cargar una imagen... He encontrado códigos que efectúan la animación al colocar encima el ratón (hover). ¿Se puede aplicar el código al cargarse la imagen? Gracias por cualquier orientación...
animation de CSS y aplicarla a la imagen utilizando la pseudoclase :before.img:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
background: url('ruta/de/la/imagen');
animation: animacion 2s ease forwards;
z-index: -1;
}
@keyframes animacion {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}:before a la imagen, al que se le aplica la animación. El pseudo-elemento se coloca debajo de la imagen, para que la imagen se muestre encima y la animación se vea como si estuviera sucediendo en la imagen misma.background.`te das cuenta que te respondió un bot no?Gracias... Quiero aplicar el efecto al logo del Sitio... y veo en el código varias urls de diferentes copias de la imagen con diferentes tamaños, supongo que para ser mostradas en diferentes dispositivos... ¿Es posible aplicar el efecto a la clase de la img? Gracias de nuevo...
`te das cuenta que te respondió un bot no?
Y si, si puedes hacer lo que comentas. es un callback, pero se maneja con Js, busca en google el codigo es par de lineas
Con keyframe y animacion infinite y transform ...
.aqui {
height: 60px;
width: 180px;
background: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png);
position: absolute;
top: 23px;
animation: animacion 0.6s infinite;
}
@keyframes animacion {
50% {
transform: translateY(-5px);
}
}
Al css le quitas el background al selector "aqui"Como dije en mi primera respuesta: Quiero aplicar el efecto al logo del Sitio... y veo en el código varias urls de diferentes copias de la imagen con diferentes tamaños, supongo que para ser mostradas en diferentes dispositivos... Gracias Puko...
Al css le quitas el background al selector "aqui"
.aqui {
position: absolute;
top: 23px;
animation: animacion 0.6s infinite;
}
y le agregas el class "aqui" a las etiquetas de las imágenes ... : <img class="aqui" ...
<div class="p-header-logo p-header-logo--image">
<a href="https://forobeta.com">
<img class="aqui" src="https://forobeta.com/uploads/forobeta-logo.png" srcset="" alt="ForoBeta | Foro de webmasters" width="255" height="100">
</a>
</div>
Tu proyecto utiliza algun framework? en React es realmente sencillo manejar esto a través de los estados.
1. Al selector de la etiqueta <img> que le pusimos "aqui" le ponemos un 'margen' para cuando haga zoom ...Gracias Puko... Funciona... Ahora bien, no es una animación infinita la que busco, sino un zoom o un giro que se produzca una vez, al cargarse la imagen... como estos ejemplos: https://www.enriquejros.com/efectos-imagenes-css/#Zoom_y_cambios_de_tamano pero al cargarse la imagen, en lugar de al pasar el mouse...
1. Al selector de la etiqueta <img> que le pusimos "aqui" le ponemos un 'margen' para cuando haga zoom ...
.aqui {
position: absolute;
top: 23px;
left: 34px;
}
2.Si solo es una vez la 'animacion' , le quitamos infinite y dejamos 6s para la velocidad de la animacion...
.aqui {
position: absolute;
top: 23px;
animation: hoverx 6s;
left: 34px;
}
3. Para hacer la animacion hover con keyframes...
3.1 Le pondremos un nombre por ejemplo : "hoverx" ...
@keyframes hoverx{
...
}
3.2 Para la animacion zoom, dividivos el 100% entre 3, cuando inicia, cuando hace zoom y cuando vuelve a su tamaño ...
3.2.1 Cuando inicia le ponemos scale 1, cuando hace zoom 1.2 y cuando vuelve a su tamaño 1 ...
@keyframes hoverx{
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
*Al codepen abajo dale click en "Rerun" para que se vuelva a "cargar"
Utilizamos cookies y tecnologías similares para los siguientes fines:
¿Aceptas las cookies y estas tecnologías?
Utilizamos cookies y tecnologías similares para los siguientes fines:
¿Aceptas las cookies y estas tecnologías?
