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 CSS effet scale

Dernière modification : octobre 2022



<ul class=slideshow>

<li><img src="1.jpg" alt></li>
<li><img src="2.jpg" alt></li>
<li><img src="3.jpg" alt></li>

</ul>




*{box-sizing:border-box}


.slideshow{

position: relative;
overflow: hidden;
max-width: 600px;
aspect-ratio:3/2;
margin: auto;
border: 10px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.4)

}

.slideshow [src]{

margin: 0;
padding: 0;
list-style-type: none;
position: absolute;
opacity: 0;
left: 0;
height: 100%;
width: 100%;
animation: slide 9s linear infinite

}
   
   
.slideshow [src="2.jpg"]{


animation-delay: 3s

}

.slideshow [src="3.jpg"]{


animation-delay: 6s

}


@keyframes slide{

0%{

opacity: 0

}

12%{

opacity: 1;
transform: scale(1.03)

}

25%{

opacity: 1;
transform: scale(1.06);

}

37% {

opacity: 0;
transform: scale(1.30);

}

100% {

opacity:0;

}

}




<ul class="slideshow2">

<li><img src="" alt></li>
<li><img src="" alt></li>
<li><img src="" alt></li>
<li><img src="" alt></li>

</ul>




*{box-sizing:border-box}


.slideshow2{

border:5px solid #fff;
box-shadow:0 1px 4px rgba(0,0,0,.4);
position: relative;
aspect-ratio:3/2;
overflow: hidden;
	
	}
	
	
.slideshow2 li img {
	
top:0;
left:0;
height:100%;
width:100%;
position: absolute;
opacity: 0;
	
	}
	

.slideshow2 li:nth-child(1) img,
.slideshow2 li:nth-child(2) img,
.slideshow2 li:nth-child(3) img,
.slideshow2 li:nth-child(4) img{
	
animation:slide1 20s ease infinite
	
	}
	
.slideshow2 li:nth-child(2) img{
	
	animation-delay: 5s
	
	}
.slideshow2 li:nth-child(3) img{
	
	animation-delay: 10s
	
	}
	
.slideshow2 li:nth-child(4) img{
	
	animation-delay: 15s
	
	}
    
@keyframes slide1{
	
	0%{
	
	transform: scale(5);
	opacity: 0
	
	}
	
12%{
	transform: scale(1);
	opacity: 1;
	
	
	}
	
25%{
	transform: scale(1);
	opacity: 1;

	
	}
	
37%{
	transform: scale(1);
	opacity: 0;
	
	
	}
	
100%{
	

	
	}
	
	}



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.