Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

Vous ĂȘtes ici : Accueil > DĂ©monstrations > CSS > Lightbox/slideshow/slider

Slideshow responsive CSS clip-path

Code :

HTML


<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>


CSS


.cadre-contenu{
	
margin:2rem auto 10rem auto;
max-width:600px;
max-height:400px
	}	
	
.contenu {
	
overflow: hidden;
position: relative;
border: 10px solid white;
box-shadow: 0 0 5px hsla(0,0%,0%,.5);
width: 100%; 
height: 0; 
padding-top: 75%

		}
		
		
.contenu img{
	
width: 100%;
height: 100%;
position: absolute; 
left: 0; 
top: 0; 
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
animation: slideshow 36s ease-in-out infinite
	
    }
	

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

.contenu img:nth-of-type(5){
	
animation-delay: 24s
		
}

.contenu img:nth-of-type(6){
	
animation-delay: 30s
		
}

		
@keyframes slideshow{

0%{ 
		
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%)
		
}
		
1%, 12.66% {

clip-path: polygon(50% -50%, -15% 0, -15% 100%, 50% 150%, 115% 100%, 115% 0);
	
}
		
		
16.66%, 100% {

		
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%)
    
}
    
}


Support navigateurs :

CSS clip-path

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

Avant de vous arracher les cheveux ou de crier au scandale, procĂ©dez Ă  quelques simples vĂ©rifications. Si la dĂ©monstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de mĂȘme chez vous. De plus vous pouvez tĂ©lĂ©charger la dĂ©monstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne rĂ©ponds qu'aux messages respectueux.