Dernière modification : septembre 2022
Le code :
<div class="slideshow">
<img src="votre_image" alt>
<img src="votre_image" alt>
<img src="votre_image" alt>
<img src="votre_image" alt>
<img src="votre_image" alt>
</div>
*{box-sizing: border-box}
img{max-width:100%;display:block}
.slideshow{
margin:5rem auto;
max-width: 600px;
aspect-ratio:3/2;
border: 5px solid hsl(0,0%,100%);
box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.29);
overflow: hidden;
position: relative
}
.slideshow img{
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
-webkit-mask-image: linear-gradient(to right,red,red);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-image: linear-gradient(to right,red,red);
mask-repeat: no-repeat;
mask-size: 100% 100%;
animation: slideshow 25s linear infinite
}
.slideshow img:nth-child(2){
animation-delay: 5s
}
.slideshow img:nth-child(3){
animation-delay: 10s
}
.slideshow img:nth-child(4){
animation-delay: 15s
}
.slideshow img:nth-child(5){
animation-delay: 20s
}
@keyframes slideshow{
0%,100% {
opacity: 0
}
10% {
opacity: 1
}
20% {
opacity: 1;
-webkit-mask-position: 200% 0%;
-webkit-mask-size: 100% 100%;
mask-position: 200% 0%;
mask-size: 100% 100%
}
25%{
opacity: 0;
-webkit-mask-size: 0% 100%;
mask-size: 0% 100%
}
}
Le code :
<div class="slideshow">
<img src="votre_image" alt>
<img src="votre_image" alt>
<img src="votre_image" alt>
<img src="votre_image" alt>
<img src="votre_image" alt>
</div>
*{box-sizing: border-box}
img{max-width:100%;display:block}
.slideshow{
max-width: 600px;
aspect-ratio:3/2;
border: 5px solid hsl(0,0%,100%);
box-shadow: 0 0 5px hsla(0,0%,0%,.5);
overflow: hidden;
position: relative
}
.slideshow img{
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
-webkit-mask-image: linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%));
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-image: linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%));
mask-repeat: no-repeat;
mask-size: 100% 100%;
animation: slideshow 25s linear infinite
}
.slideshow img:nth-child(2){
animation-delay: 5s
}
.slideshow img:nth-child(3){
animation-delay: 10s
}
.slideshow img:nth-child(4){
animation-delay: 15s
}
.slideshow img:nth-child(5){
animation-delay: 20s
}
@keyframes slideshow{
0%,100% {
opacity: 0
}
4% {
opacity: 1
}
20% {
opacity: 1;
-webkit-mask-position:
0 0,
60px 0,
120px 0,
180px 0,
240px 0,
300px 0,
360px 0,
420px 0,
480px 0,
540px 0;
-webkit-mask-size: 10% 100%;
mask-position:
0 0,
60px 0,
120px 0,
180px 0,
240px 0,
300px 0,
360px 0,
420px 0,
480px 0,
540px 0;
mask-size: 10% 100%
}
24%{
opacity: 0;
-webkit-mask-size: 0% 100%;
mask-size: 0% 100%
}
}