Beispiel:Bildwechsler-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <title>Bildwechsler mit CSS-animation 3</title>
  <style>
.gallery {
  position: relative;
  background: none; 
  border: none; 
}
 
.gallery figure {
  position: absolute;
  top: 0;
  left: 0;
}
 
.gallery figcaption {
  position: absolute;
  left: 1em;
  font-size: 2em;
  font-weight: bold;
  bottom: 0.5em;
  color: white;
}
      
@keyframes bilder {
   0% {opacity: 1;} 
  34% {opacity: 1;}
  35% {opacity: 0;}
 100% {opacity: 0;}
}

.gallery figure:nth-of-type(1) {  
  animation: bilder 15s 7s infinite;
}

.gallery figure:nth-of-type(2) {  
  animation: bilder 15s 2s infinite;
}

.gallery figure:nth-of-type(3) {  
  animation: bilder 15s 12s infinite;
}

@keyframes wechseln {
    0% {opacity: 1; transform: scale(1,1); z-index: 20;}
   20% {opacity: 1; transform: scale(1,1);}
   34% {opacity: 0; transform: scale(0,0);}
  100% {opacity: 1; transform: scale(0,0);}
}

.gallery figure:nth-of-type(4) { 
  animation: wechseln 15s 10s infinite;
}

.gallery figure:nth-of-type(5) {  
  animation: wechseln 15s 5s infinite;
}

.gallery figure:nth-of-type(6) {  
  animation: wechseln 15s infinite;
}
  </style>
</head>
<body>
  <h1>Bildwechsler mit CSS-animation 3</h1>
    <h2>Ein Tag in Nürnberg</h2>   
    <div class="gallery">
     <figure>
       <img src="//wiki.selfhtml.org/images/f/fd/Burg-in-N%C3%BCrnberg-3.jpg" alt="Blick auf Kaiserburg - eigene Aufnahme">
       <figcaption>abends</figcaption>
     </figure>
     <figure>
       <img src="//wiki.selfhtml.org/images/b/b9/Burg-in-N%C3%BCrnberg-2.jpg" alt="Blick auf Kaiserburg - eigene Aufnahme">
       <figcaption>mittags</figcaption>
     </figure>
     <figure>
       <img src="//wiki.selfhtml.org/images/5/58/Burg-in-N%C3%BCrnberg-1.jpg" alt="Blick auf Kaiserburg - eigene Aufnahme">
       <figcaption>morgens</figcaption>
     </figure>
     <figure>
       <img src="//wiki.selfhtml.org/images/f/fd/Burg-in-N%C3%BCrnberg-3.jpg" alt="Blick auf Kaiserburg - eigene Aufnahme">
       <figcaption>abends</figcaption>
     </figure>
     <figure>
       <img src="//wiki.selfhtml.org/images/b/b9/Burg-in-N%C3%BCrnberg-2.jpg" alt="Blick auf Kaiserburg - eigene Aufnahme">
       <figcaption>mittags</figcaption>
     </figure>
     <figure>
       <img src="//wiki.selfhtml.org/images/5/58/Burg-in-N%C3%BCrnberg-1.jpg" alt="Blick auf Kaiserburg - eigene Aufnahme">
       <figcaption>morgens</figcaption>
     </figure>
    </div>    

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:Bildwechsler-3.html&oldid=83726“