Dernière modification : décembre 2022
Le code :
<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%{
}
}