« Modèle:CSSaccueil » : différence entre les versions

De WikiFiction
Admin (discussion | contributions)
Aucun résumé des modifications
Balise : Révoqué
Admin (discussion | contributions)
Page blanchie
Balises : Blanchiment Révoqué
Ligne 1 : Ligne 1 :
{{#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}
}

Version du 5 octobre 2024 à 14:35