Modèle:CSSaccueil
{{#css:
- {box-sizing: border-box }
img{
max-width:100%
}
.slideshow{
border: 0px solid white; box-shadow: 0 0 0px hsla(0,0%,0%,.5); overflow: hidden; max-width: 1042px; max-height: 734px; margin: 2rem auto; position: relative
}
.slideshow ul{
padding-bottom: 66.67%;/* ratio pour le responsive */ margin: 0; list-style-type: none; position: relative
}
.slideshow li{
top: 0; left: 0; animation: slideshow 117s ease infinite; position: absolute; opacity: 0;
}
.slideshow li:nth-child(1){
animation-delay: 0s
}
.slideshow li:nth-child(2){
animation-delay: 9s
}
.slideshow li:nth-child(3){
animation-delay: 18s
}
.slideshow li:nth-child(4){
animation-delay: 27s
}
.slideshow li:nth-child(5){
animation-delay: 36s
}
.slideshow li:nth-child(6){
animation-delay: 45s
}
.slideshow li:nth-child(7){
animation-delay: 54s
}
.slideshow li:nth-child(8){
animation-delay: 63s
}
.slideshow li:nth-child(9){
animation-delay: 72s
}
.slideshow li:nth-child(10){
animation-delay: 81s
}
.slideshow li:nth-child(11){
animation-delay: 90s
}
.slideshow li:nth-child(12){
animation-delay: 99s
}
.slideshow li:nth-child(13){
animation-delay: 108s
}
@keyframes slideshow{
0%{opacity: 0}
10%{opacity: 1}
20%{opacity: 1}
25%{opacity: 0}
100%{opacity: 0}
}
.slideshow span{
background: rgba(0,0,0,0.7); height: 40px; align-items: center; justify-content: center; display: flex; color: white; position: absolute; bottom: 0; right: 0; left: 0
}
/*****barre progression *****/ .barre_progression{
position: absolute; left: 0; bottom: 40px; height: 5px; background: white; animation: barre_progression 25s ease-out infinite;
}
/*****animation barre progression *****/ @keyframes barre_progression{
0%,20%,40%,60%,80%,100%{width: 0%;opacity: 0}
4%,24%,44%,64%,84%{width: 0%;opacity: .3}
16%,36%,56%,76%,96%{width: 100%;opacity: .7}
17%,37%,57%,77%,97%{width: 100%;opacity: .3}
18%,38%,58%,78%,98%{width: 100%;opacity: 0}
}