Cuando diseñamos páginas web, a menudo utilizar carrusel Figura diseño, en circunstancias normales sería usar js, hacerlo fuera del relativamente frío efectos especiales. Pero por alguna página web sencilla, carrusel simple que muestra los efectos con css, es muy conveniente.
Mira el novato, los veteranos son gratis! ! ! ! ! ! ! ! !
Ver la figura ↓↓↓
mapa de lujo,
el negro es la capa más externa del recipiente, es decir, podemos ver la zona (más allá del área de juego no es visible overflow: hidden),
envase rojo se utiliza para mantener necesitamos para girar la imagen, y la altura del contenedor padre la misma, de acuerdo con las necesidades de su propia configuración (añadir flexibilidad para permitir que las imágenes dispuestas horizontalmente)
caja azul indica que hemos añadido fotos
<div id="box">
<div class="box1">
<img src="./img/heisha.jpg" alt="">
<img src="./img/img3.jpg" alt="">
<img src="./img/img4.webp.jpg" alt="">
<img src="./img/mig2.webp.jpg" alt="">
<img src="./img/img5.jpg" alt="">
</div>
</div>
El siguiente paso es la operación más crítica de la animación,
configurar sub-contenedores (imagen Cargando) de movimiento lateral automático, para conseguir un efecto carrusel.
proceso de animación css en movimiento es de 100, más de una docena que separamos el marco, de manera que los sub-contenedores se mueve lugar, para lograr una vista carrusel de un efecto suspensivo automático , vistazo al código ↓↓↓
#box{border: 10px black solid;width: 1200px;height: 600px;overflow: hidden;margin: 100px auto;}
#box .box1{width: 6000px;height: 600px;display: flex;animation: mov 28s infinite;}
#box .box1 img{width: 1200px;height: 600px;}
@keyframes mov{
0%{transform: translate(-4800px,0);}
11%{transform: translate(-4800px,0);}
22%{transform: translate(-3600px,0);}
33%{transform: translate(-3600px,0);}
44%{transform: translate(-2400px,0);}
55%{transform: translate(-2400px,0);}
66%{transform: translate(-1200px,0);}
77%{transform: translate(-1200px,0);}
88%{transform: translate(0px,0);}
100%{transform: translate(0px,0);}
Efecto del vídeo (vídeo en una calidad de imagen GIF tocar, perdóname) ↓↓↓
Hay varios puntos que tenemos que prestar atención:
envase y la imagen a tamaño 1. Conjunto para que coincida con la comodidad de nuestra siguiente serie.
2. Cada movimiento debe haber una distancia de la anchura de la imagen, una vez para hacer una pausa en tales pantallas visuales un mapa, cumplir con los requisitos de diseño.
3. El tiempo de pausa, y es proporcional al número de marcos asignados como ajustes de cálculo necesarios
buena de hoy para compartir estos, o tiene alguna pregunta, por favor, hermano mayor para guiarla en los comentarios! ! ! ! ! !
