1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
|
.body {
margin: 0px;
padding 0px;
width 100%;
}
.diaporama1{
display: inline-block;
margin: 0 auto;
width: 400px;
height: 400px;
border: 3px solid #333;
background-image: url("image1.jpg");
webkit-animation-name :diapo1;
webkit-animation-duration: 20s;
webkit-animation-timing-function: linear;
webkit-animation-iteration-count: infinite;
webkit-animation-direction: normal;
moz-animation-name :diapo1;
moz-animation-duration: 20s;
moz-animation-timing-function: linear;
moz-animation-iteration-count: infinite;
moz-animation-direction: normal;
animation-name :diapo1;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}
@-webkit-keyframes diapo1{
0%{background-image: url("image1.jpg");}
33%{background-image: url("image2.jpg");}
66%{background-image: url("image3.jpg");}
}
@-moz-keyframes diapo1{
0%{background-image: url("image1.jpg");}
33%{background-image: url("image2.jpg");}
66%{background-image: url("image3.jpg");}
}
@keyframes diapo1{
0%{background-image: url("image1.jpg");}
33%{background-image: url("image2.jpg");}
66%{background-image: url("image3.jpg");}
} |
Partager