Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Accueil BlogDémonstrationsCSSLightbox/slideshow/slider...
Partagez cette démonstration : Partager sur Facebook Partager sur Twitter

Slideshow responsive CSS clip-path

Dernière modification : septembre 2022



<div class=cadre-contenu>
<div class="contenu">
<img src="images/1.jpg" alt>
<img src="images/2.jpg" alt>
<img src="images/3.jpg" alt>
<img src="images/4.jpg" alt>
<img src="images/5.jpg" alt>
<img src="images/6.jpg" alt>
</div>	
</div>




.cadre-contenu{
	
margin: 2rem auto;
overflow: hidden;
position: relative;
border: 10px solid white;
box-shadow: 0 0 5px hsla(0,0%,0%,.5);
max-width: 600px;
aspect-ratio: 3/2

	}	
		
		
		
.contenu img{

width: 100%;
height: 100%;
position: absolute; 
left: 0; 
top: 0; 
clip-path: circle(0% at 50% 0%);
animation: slideshow 24s  infinite 
	
    }

		
.contenu img:nth-of-type(2){

animation-delay: 4s
		
}
		
.contenu img:nth-of-type(3){

	

animation-delay: 8s
		
}
		
.contenu img:nth-of-type(4){

	

animation-delay: 12s
		
}

.contenu img:nth-of-type(5){


animation-delay: 16s
		
}

.contenu img:nth-of-type(6){


animation-delay: 20s
		
}

		
@keyframes slideshow{


	
0%, 100% {
   clip-path: circle(0% at 50% 50%);
  }
  4.17% {
    clip-path: circle(150% at 50% 50%);
  }
  16.67% {
    clip-path: circle(150% at 50% 50%);
  }
  20.83% {
   clip-path: circle(0% at 50% 50%);
  }
}	




Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.