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}

}