Cómo usar css3 para lograr efectos de rotación automática de imágenes (código completo adjunto)
Mientras navegas por la web, encontrarás un efecto especial llamado rotación de imagen: diferentes imágenes en la misma posición se reproducirán en bucle según los cambios en el tiempo, logrando un efecto similar a la reproducción de una presentación de diapositivas. Entonces, ¿cómo logramos el efecto de rotación de la imagen durante el desarrollo web? Este artículo le mostrará cómo utilizar css3 para lograr efectos de rotación de imágenes.
La idea principal de usar css3 para lograr el efecto de rotación
Prepararemos varias imágenes del mismo tamaño en la misma posición y las colocaremos horizontalmente en un contenedor div, y luego, encima del contenedor div, configure un contenedor de visualización que muestre una imagen del mismo tamaño que la imagen y, finalmente, agregue una animación personalizada en el contenedor de imágenes y establezca valores de desplazamiento incrementales en diferentes etapas de la animación.
Nota
El efecto de animación se divide en dos partes: cambiar y permanecer.
El desplazamiento de la animación está relacionado con el tamaño de la imagen.
Principios del uso de CSS3 para crear efectos de rotación
Primero, debe asegurarse de que el contenedor de visualización tenga el mismo tamaño que la imagen, luego agregue un efecto flotante a la imagen y luego determine el número de imágenes a insertar y agregar etapas de animación se configuran para cada imagen, y cada etapa se alterna estableciendo un valor de margen izquierdo creciente usando fotogramas clave.
Pasos (código) para implementar la rotación de imágenes usando css3
Paso 1: Agregar imagen usando HTML
lt;div id="container"gt; p>
p>
lt;div id="photo"gt;
lt;div id="photo"gt;
lt;img src=" 1.png" / gt;
lt; img src="2.png" /gt;
lt; img src="3.png" /gt;
lt ;/divgt;
lt;/divgt;Paso 2: use css3 para configurar la etapa de animación
#container {
ancho: 400px;
alto: 300px;
desbordamiento: oculto;
}
#photo {
ancho : 1200px;
animación: interruptor 5s de salida infinita
}
#photo gt {
flotación: izquierda
ancho: 400px;
alto: 300px;
}<
@keyframes {
0, 25 {
margen izquierdo: 0;
}
35, 60 {
margen izquierdo: -400px;
}
70, 100 {
margen-izquierdo: -800px
}
}Lograr efecto de rotación de imagen
Más códigos interesantes de efectos especiales CSS3 y JavaScript están disponibles en: colección de efectos especiales js