Création d'un diaporama en HTML et en CSS
<body>
<div class="size photo1 relative anim1 move">
<div class="size photo2 absolute anim2">
<div class="size photo3 absolute anim3"></div>
</div>
</div>
</body>div{
margin: auto;
box-shadow: 10px 10px 10px grey;
}
.size{
width: 500px;
height: 600px;
}
.photo1{
background-image:url("https://fastly.picsum.photos/id/149/500/600.jpg?hmac=OFzKFdHawMFbwJV7AozdXGRQ0ULzMR-SBNIXla_A494");
}
.photo2{
background-image:url("https://fastly.picsum.photos/id/506/500/600.jpg?hmac=Z9NoN0e4d6f-PrBQd9KZbS83Jj2dh_yfbq3h7DGd5to");
}
.photo3{
background-image: url('https://fastly.picsum.photos/id/1008/500/600.jpg?hmac=p1we3qO7v7VgcPfuhEpUrrzHdycn9QNEZFZDfPD1U34');
}
.relative{
position: relative;
}
.absolute{
position: absolute;
}
.anim1{
animation-name: anim;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
animation-delay: 20s;
}
.anim2{
animation-name: anim;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
animation-delay: 10s;
}
.anim3{
animation-name: anim;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
}
div:hover{
animation-play-state: paused;
opacity: 30%;
}
@keyframes anim{
from{
opacity: 100%
}
to{
opacity: 0%
}
}
.move{
animation-name: move;
animation-duration: 15s;
animation-iteration-count: infinite;
}
@keyframes move{
from{
transform: translateX(-100%);
}
to{
transform: translateX(100%);
}
}
Comments