html - 网站闪电代码 CSS

Question

我基本上是在尝试实现此网页所展示的结果。 http://codepen.io/Chrislion_me/pen/rVqwbO我使用了上面页面中的一些 CSS 并将其集成到我的页面中。

我对整个 HTML/CSS 世界还很陌生。我想为 uni 的一个元素做的是创建一个主页，其中有一张闪电 Storm 的图片在背景中，被覆盖层覆盖，覆盖层过滤掉了一些图片 Picture of current website .

基本上，照片必须固定在原处，所以如果我进一步向下滚动页面，它不会移动并保持固定在页面顶部。

所以这工作得很好，问题是，我的闪电 Storm 无法正常工作， Storm 应该每隔 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 结构。现在，您只是通过将 class banner 和 #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>

还请注意，z-index 在这里起着重要作用，它在具有 z-index 动画的 div 下设置#bg div:-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;
}