Webseite Lightning Code CSS

Question

Ich versuche grundsätzlich das Ergebnis zu erreichen, dass diese Webseite demonstriert. http://codepen.io/Chrislion_me/pen/rVqwbO Ich habe einige der CSS von der obigen Seite verwendet und in meine Seite integriert.

Ich bin ziemlich neu in der ganzen HTML/CSS-Welt. Was ich für ein Projekt bei uni versuche, ist eine Homepage zu erstellen, auf der im Hintergrund ein Bild eines Gewitters zu sehen ist, überdeckt von einer Überlagerung, die einige der Bilder aus dem Bild herausfiltert Picture of current website.

Grundsätzlich muss das Foto an der Stelle bleiben, an der es sich befindet. Wenn ich also weiter nach unten blättert, bewegt es sich nicht und bleibt oben auf der Seite fixiert.

Das funktioniert also ganz gut, das Problem ist, ich kann meinen Blitzsturm nicht richtig funktionieren lassen, der Sturm soll ein paar Mal alle ~ 7 Sekunden blinken. Der erste Link, den ich hochgeladen habe, zeigt, was ich tun möchte.

Abhängig von der Art, wie ich mit dem Code spiele, wird es normalerweise nur weiß und dann alle ~ 7 Sekunden blinkt es das Bild und wird dann wieder weiß. Ich bin nicht sicher, wo ich falsch liege, ich habe einen Teil meines Codes unten veröffentlicht, wenn das hilft - es ist nur Abschnitt, der das Bild und die Schaltflächen hostet, kann ich mehr CSS wenn es benötigt wird.

Vielen Dank im Voraus! :)

HTML

<div id="bg" class="banner flashit"> 
<p>TEST TEXT</p> 
<ul class="actions"> 
<li><a href="#" class="button special big">Click here</a></li> 
</ul> 
</div> 

CSS

#bg{ 
    padding: 16em 0 13em 0; 
    background-attachment: fixed; 
    background-image: url("images/overlay.png"), url("../images/banner.jpg"); 
    background-position: center top; 
    background-size: cover; 
    line-height: 1.75; 
    text-align: center; 
    z-index: -2; 
} 
.banner { 
    padding: 16em 0 13em 0; 
    background-attachment: fixed; 
    background-image: url("images/overlay.png"), url("../images/banner.jpg"); 
    background-position: center top; 
    background-size: cover; 
    line-height: 1.75; 
    text-align: center; 
    -webkit-filter: brightness(3); 
    filter: brightness(3); 
    -o-filter: brightness(3); 
    -moz-filter: brightness(3); 
    z-index: -1; 
} 
.flashit{ 
    -webkit-animation: flash ease-out 10s infinite; 
    -moz-animation: flash ease-out 10s infinite; 
    animation: flash ease-out 10s infinite; 
    animation-delay: 2s; 
} 
@-webkit-keyframes flash { 
    from { opacity: 0; } 
    92% { opacity: 0; } 
    93% { opacity: 0.6; } 
    94% { opacity: 0.2; } 
    96% { opacity: 0.9; } 
    to { opacity: 0; } 
} 
@keyframes flash { 
    from { opacity: 0; } 
    92% { opacity: 0; } 
    93% { opacity: 0.6; } 
    94% { opacity: 0.2; } 
    96% { opacity: 1; } 
    to { opacity: 0; } 
} 

Answer 1

Wenn ich Ihr Problem verstanden, was Sie hier fehlt, ist die richtige HTML-Struktur. Im Moment wiederholen Sie nur Code, indem Sie Klassenbanner und #bg auf dasselbe Element anwenden. Wenn Sie bemerken, in dem gegebenen Beispiel der Effekt ausgeführt wird, indem die Klasse Animation auf einem anderen div Anwendung und hält das gleiche Bild Hintergrund und hat die gleiche Größe und Eigenschaften, wie folgt aus:

<div id="bg"> 

    <p>TEST TEXT</p> 
    <ul class="actions"> 
     <li><a href="#" class="button special big">Click here</a></li> 
    </ul> 
</div> 
<div class="bg-lighted flashit"></div> 

auch feststellen, dass die z -index spielt hier eine wichtige Rolle, indem das #bg div unter dem div gesetzt wird, das Animation mit z-index: -2 hat, und das animierte mit z-index: -1; so haben wir und das Bild auf dem Hintergrund fixiert, der nie blinkt und immer bleibt. So braucht Ihre CSS dies ähnlich zu sein:

#bg{ 

    padding: 16em 0 13em 0; 
    background-attachment: fixed; 
    line-height: 1.75; 
    text-align: center; 
    position: fixed; 
width:100%; 
    background-attachment: fixed; 
    background-image: url("https://images.unsplash.com/photo-1431352832634-845fad190fbd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=ec80c41e488dc2b99ed543df2f3f0919"); 
    background-position: center top; 
    background-size: cover; 
    line-height: 1.75; 
    text-align: center; 
    z-index: -2; 
    -webkit-filter: brightness(3); 
    filter: brightness(3); 
    -o-filter: brightness(3); 
    -moz-filter: brightness(3); 

} 

.flashit{ 
    -webkit-animation: flash ease-out 10s infinite; 
    -moz-animation: flash ease-out 10s infinite; 
    animation: flash ease-out 10s infinite; 
    animation-delay: 2s; 
} 
@-webkit-keyframes flash { 
    from { opacity: 0; } 
    92% { opacity: 0; } 
    93% { opacity: 0.6; } 
    94% { opacity: 0.2; } 
    96% { opacity: 0.9; } 
    to { opacity: 0; } 
} 
@keyframes flash { 
    from { opacity: 0; } 
    92% { opacity: 0; } 
    93% { opacity: 0.6; } 
    94% { opacity: 0.2; } 
    96% { opacity: 1; } 
    to { opacity: 0; } 
} 
.bg-lighted{ 
    padding: 16em 0 13em 0; 
    background-attachment: fixed; 
    line-height: 1.75; 
    text-align: center; 


    background: url('https://images.unsplash.com/photo-1431352832634-845fad190fbd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=ec80c41e488dc2b99ed543df2f3f0919'); 
    background-position: center center; 
    background-origin: content-box; 
    background-size: cover; 
    background-attachment: fixed; 
    -webkit-filter: brightness(3); 
    filter: brightness(3); 
    -o-filter: brightness(3); 
    -moz-filter: brightness(3); 
    z-index: -1; 
}