|
|
| 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>
| |
