5545 sujets

Sémantique web et HTML

Diaporama HTML CSS

Bonjour,

J'ai un projet "création d'un site web" en classe de Seconde, et j'aimerais insérer un diaporama.
Pouvez-vous m'aider, car j'ai recopier les codes mais cela ne fonctionne pas. Merci pour votre aide et vos réponses !
https://www.pierre-giraud.com/html-css/exercices-html-css/creation-diaporama-html-css.php

HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>Diaporama</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="diaporama.css">
    </head>  
 <body>
     <h1>Un diaporama en HTML et CSS</h1>
  <h2>Première méthode :</h2>
  <div class="diaporama1">
  
  </div>
 </body> 
</html>


CSS : 

body{
 margin: 0px;
 padding: 0px;
 width: 100%;
}
.diaporama1{
    margin: 0 auto;
 width: 960px; 
 height: 500px;
 border: 3px solid #333;
 background-image: url("imgs/image1.jpg");
 
 webkit-animation-name: diapo1;
 webkit-animation-duration: 9s;
 webkit-animation-timing-function: linear;
 webkit-animation-iteration-count: infinite;
 webkit-animation-direction: normal;
 
 moz-animation-name: diapo1;
 moz-animation-duration: 9s;
 moz-animation-timing-function: linear;
 moz-animation-iteration-count: infinite;
 moz-animation-direction: normal;
 
 animation-name: diapo1;
 animation-duration: 9s
 animation-timing-function: linear;
 animation-iteration-count: infinite;
 animation-direction: normal;
}
@-webkit-keyframes diapo1{
    0%{background-image: url("imgs/image1.jpg");}
    33%{background-image: url("imgs/image2.jpg");} 
 66%{background-image: url("imgs/image3.jpg");}
}

@-moz-keyframes diapo1{
    0%{background-image: url("imgs/image1.jpg");}
    33%{background-image: url("imgs/image2.jpg");} 
 66%{background-image: url("imgs/image3.jpg");}
}

@keyframes diapo1{
    0%{background-image: url("imgs/image1.jpg");}
    33%{background-image: url("imgs/image2.jpg");} 
 66%{background-image: url("imgs/image3.jpg");}
}
Sujet clos
Aller à