Dernière modification : septembre 2022
<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>
.cadre-contenu{
margin: 2rem auto;
overflow: hidden;
position: relative;
border: 10px solid white;
box-shadow: 0 0 5px hsla(0,0%,0%,.5);
max-width: 600px;
aspect-ratio: 3/2
}
.contenu img{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
clip-path: circle(0% at 50% 0%);
animation: slideshow 24s infinite
}
.contenu img:nth-of-type(2){
animation-delay: 4s
}
.contenu img:nth-of-type(3){
animation-delay: 8s
}
.contenu img:nth-of-type(4){
animation-delay: 12s
}
.contenu img:nth-of-type(5){
animation-delay: 16s
}
.contenu img:nth-of-type(6){
animation-delay: 20s
}
@keyframes slideshow{
0%, 100% {
clip-path: circle(0% at 50% 50%);
}
4.17% {
clip-path: circle(150% at 50% 50%);
}
16.67% {
clip-path: circle(150% at 50% 50%);
}
20.83% {
clip-path: circle(0% at 50% 50%);
}
}