Modèle:CSSBélier : Différence entre versions

De WikiFiction
Aller à : navigation, rechercher
(Page blanchie)
(Annulation des modifications 43200 de Admin (discussion))
Ligne 1 : Ligne 1 :
 +
<html>
 +
<style type='text/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}
 +
 +
}
 +
</style>
 +
</html>

Version du 26 mai 2025 à 09:21

Récupérée de « http://wikifiction.fr/index.php?title=Modèle:CSSBélier&oldid=43201 »