Website Lightning Code CSS

Question

Я в основном пытаюсь добиться результата, который демонстрирует эта веб-страница. http://codepen.io/Chrislion_me/pen/rVqwbO Я использовал некоторые из CSS на вышеуказанной странице и интегрирован в свою страницу.

Я довольно новичок во всем мире HTML/CSS. То, что я пытаюсь сделать для проекта в uni, - это создать домашнюю страницу, на которой есть фотография грозы на заднем плане, покрытая наложением, которое слишком отфильтровывает часть изображения Picture of current website.

В принципе, фото должно оставаться фиксированным там, где оно есть, поэтому, если я прокручу дальше по странице, он не сдвинется и останется в верхней части страницы.

Так что это работает отлично, проблема в том, что я не могу заставить свою молнию работать правильно, буря должна вспыхивать пару раз каждые ~ 7 секунд. Первая ссылка, которую я опубликовал, демонстрирует то, что я ищу.

В зависимости от того, как я играю с кодом, он обычно просто белым, а затем каждые 7 секунд он мигает изображением, а затем снова белым. Я не уверен, где я ошибся, я добавил часть моего кода ниже, если это поможет - это просто раздел, на котором размещается изображение и кнопки, я могу опубликовать больше CSS, если это необходимо.

Заранее благодарен! :)

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

Если я понял вашу проблему, то, что вы здесь не хватает является собственно HTML структура. Сейчас вы только повторяете код, применяя баннер класса и #bg к тому же элементу. Если вы заметили, в этом примере вы предоставили эффект выполняется путем применения класса анимации на другой DIV и имеет тот же фоновое изображение и имеет тот же размер и свойства, как это:

<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> 

также заметить, что г -индекс играет важную роль здесь, установив #bg div под div, который имеет анимацию с z-index: -2, а анимированный с z-index: -1; поэтому мы имеем и изображение, зафиксированное на фоне, которое никогда не мигает и всегда остается. Таким образом, ваш CSS должен быть похож на это:

#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; 
}