Cómo usar css3 para lograr efectos de rotación automática de imágenes (código completo adjunto)

Este artículo presenta cómo usar css3 para lograr efectos de rotación de imágenes y se centra en sus pasos de operación específicos. El contenido de este artículo es compacto y espero que todos puedan obtener algo.

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>

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