« Modèle:CSSaccueil » : différence entre les versions
Page blanchie Balises : Blanchiment Révoqué |
Aucun résumé des modifications Balise : Révocation manuelle |
||
| 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> | |||
Dernière version du 13 octobre 2024 à 18:03