Slideshow en CSS3
Code :
HTML
<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>
CSS
*{-webkit-box-sizing:border-box;box-sizing:border-box}
img {max-width: 100%;}
.slideshow [src]{
margin:0;
padding:0;
list-style-type: none;
position: absolute;
opacity: 0;
left: 0;
animation: slide 9s linear infinite
}
.slideshow{
position: relative;
overflow: hidden;
width: 600px;
height: 300px;
margin: auto;
border: 10px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.4)
}
.slideshow [src="2.jpg"]{
animation-delay: 3s
}
.slideshow [src="3.jpg"]{
animation-delay: 6s
}
/*animations-source originale http://playground.deaxon.com*/
@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="diapo">
<li><img src="" alt></li>
<li><img src="" alt></li>
<li><img src="" alt></li>
<li><img src="" alt></li>
</ul>
CSS
*{box-sizing:border-box}
img {max-width: 100%;}
.diapo{
position: relative;
border:5px solid #fff;
box-shadow:0 1px 4px rgba(0,0,0,.4);
height:100%;
width:100%;
max-width:600px;
overflow:hidden;
max-height:400px;
margin:0;
padding: 0;
list-style-type: none
}
.diapo li{
top:0;
left:0;
position: absolute;
opacity: 0
}
.diapo li{object-fit: cover}
.diapo li:nth-child(1),
.diapo li:nth-child(2),
.diapo li:nth-child(3),
.diapo li:nth-child(4){
animation:slide1 20s ease infinite
}
.diapo li:nth-child(2){
animation-delay: 5s
}
.diapo li:nth-child(3){
animation-delay: 10s
}
.diapo li:nth-child(4){
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(2);
opacity: 0;
}
100%{
transform: scale(0);
opacity: 0
}
}
Support navigateurs :
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.