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

De WikiFiction
Aller à : navigation, rechercher
(Page blanchie)
 
(8 révisions intermédiaires par le même utilisateur non affichées)
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 240s ease infinite;
 +
position: absolute;
 +
opacity: 0;
 +
 +
}
 +
 +
.slideshow li:nth-child(1){
 +
 +
animation-delay: 0s
 +
 +
} 
 +
 +
.slideshow li:nth-child(2){
 +
 +
animation-delay: 20s
 +
 +
}
 +
 +
.slideshow li:nth-child(3){
 +
 +
animation-delay: 40s
 +
 +
}
 +
 +
.slideshow li:nth-child(4){
 +
 +
animation-delay: 60s
 +
 +
}
 +
 +
.slideshow li:nth-child(5){
 +
 +
animation-delay: 80s
 +
 +
}
 +
 +
.slideshow li:nth-child(6){
 +
 +
animation-delay: 100s
 +
 +
}
 +
 +
.slideshow li:nth-child(7){
 +
 +
animation-delay: 120s
 +
 +
}
 +
 +
.slideshow li:nth-child(8){
 +
 +
animation-delay: 120s
 +
 +
}
 +
 +
.slideshow li:nth-child(9){
 +
 +
animation-delay: 140s
 +
 +
}
 +
 +
.slideshow li:nth-child(10){
 +
 +
animation-delay: 160s
 +
 +
}
 +
 +
.slideshow li:nth-child(11){
 +
 +
animation-delay: 180s
 +
 +
}
 +
 +
.slideshow li:nth-child(12){
 +
 +
animation-delay: 200s
 +
 +
}
 +
 +
.slideshow li:nth-child(13){
 +
 +
animation-delay: 220s
 +
 +
}
 +
 +
.slideshow li:nth-child(14){
 +
 +
animation-delay: 240s
 +
 +
}
 +
   
 +
@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 actuelle datée du 26 mai 2025 à 11:18

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