Just nu i M3-nätverket
Gå till innehåll
Steven

LÖST Bildspel med fade utan script

Rekommendera Poster

Hej!

Jag har sökt förtvivlat efter ett bildspel med fade som inte använder script. Till slut hittade jag ett som jag har modifierat men det funkar dåligt. En svart bakgrund först ett långt tag innan bilderna kommer. kan någon se vad som är fel?

Problemet är att jag har praktiskt ingen aning om vad koderna betyder utan jag har bara provat mig fram :(

Mitt html set ut som följande:
<!doctype html>

<html class="no-js" lang="sv">
<head>
<title>test</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="test" />
<meta name="description" content="Beskriver sidans innehåll" />
<meta name="keywords" content="Olika, sökord, test" />

<link rel="stylesheet" href="style.css" type="text/css" />
                              
</head>
<body>                     
<div class="wrap">            <!-- wrap box totala sidan -->
<div class="bildspel">        <!-- bildspel box sidan -->
<div id="crossfade">         <!-- box rullande text indexsidan -->

  <img src="images/1.jpg" alt="Image 1">
  <img src="images/2.jpg" alt="Image 2">
  <img src="images/3.jpg" alt="Image 3">
  <img src="images/4.jpg" alt="Image 4">
  <img src="images/5.jpg" alt="Image 5">
  <img src="images/6.jpg" alt="Image 6">
            </div>
          
            </div>                   <!-- bildspel-box sidan -->

            </div>                    <!-- wrap-box totala sidan -->


</body>
</html>

 

Mitt CSS ser ut:
.bildspel                                                                                   
{
background-color: #000000;

    height: 26em;
    padding: 0px;  
    border: 0px solid blue;
                   
}

#crossfade > img
{

    max-width: 860px;
    width: 90%;
    height: auto;
    position: absolute;
    top: 0px;

    margin: auto;
    color: transparent;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 72s linear infinite 0s;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 72s linear infinite 0s;
    -moz-animation: imageAnimation 72s linear infinite 0s;
    -o-animation: imageAnimation 72s linear infinite 0s;
    -ms-animation: imageAnimation 72s linear infinite 0s;
    animation: imageAnimation 72s linear infinite 0s;

    border: 0px solid orange;
}

#crossfade > img:nth-child(1)  {

    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}


#crossfade > img:nth-child(2)  {

    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}
#crossfade > img:nth-child(3) {
    -webkit-animation-delay: 36s;
    -moz-animation-delay: 36s;
    -o-animation-delay: 36s;
    -ms-animation-delay: 36s;
    animation-delay: 36s;
}
#crossfade > img:nth-child(4) {
    -webkit-animation-delay: 48s;
    -moz-animation-delay: 48s;
    -o-animation-delay: 36s;
    -ms-animation-delay: 48s;
    animation-delay: 48s;
}
#crossfade > img:nth-child(5) {
    -webkit-animation-delay: 60s;
    -moz-animation-delay: 60s;
    -o-animation-delay: 60s;
    -ms-animation-delay: 60s;
    animation-delay: 60s;
}

#crossfade > img:nth-child(6) {
    -webkit-animation-delay: 72s;
    -moz-animation-delay: 72s;
    -o-animation-delay: 72s;
    -ms-animation-delay: 72s;
    animation-delay: 72s;
}


@keyframes imageAnimation {
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    3% { opacity: 1;
         animation-timing-function: ease-out; }
    25% { opacity: 1 }
    35% { opacity: 0 }
    100% { opacity: 0 }
}


Finns det någon bra lösning på det här?

Hälsningar Steve!

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×
×
  • Skapa nytt...