html - 闪电效果 CSS

Question

编辑:我基本上是在尝试实现此网页展示的结果。 http://codepen.io/Chrislion_me/pen/rVqwbO

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

基本上，照片必须固定在原处，所以如果我进一步向下滚动页面，它不会像这样移动 [Stationary Lightning Storm][2]。

所以这工作得很好，问题是，我的闪电 Storm 无法正常工作， Storm 应该每隔 8 秒左右闪烁几次。

根据我使用代码的方式，它通常会变白，然后每隔约 8 秒它会闪烁图像，然后再次变白。我不确定哪里出错了，如果有帮助，我已经在下面发布了部分代码 - 它只是托管图像和按钮的部分，如果需要，我可以发布更多 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

您的动画 CSS 存在一些问题。特别是关键帧。

在关键帧中，如果您使用 from{} 和 to{}，它们与“开始”和“结束”相同。您不能也在两者之间使用百分比。从和到是您在走那条路线时可以使用的所有内容。使用 from{} 和 to{} 时不能有“中间”步骤。

如果要对关键帧使用百分比，则所有步骤都必须是百分比。因此，不要使用 from()，而是使用 0%，不要使用 to{}，而是使用 100%。

除此之外，由于您已将所有百分比设置为 90% 范围并且动画长 10 秒，从 0% 不透明度开始，有大约 11 秒的时间(2 秒延迟，然后 9 秒动画)，其中图像只是透明的，看起来好像什么都没有。更改百分比以在动画开始时开始闪烁，然后以不透明图像结束，这在很大程度上有助于此。

最终的改变仅仅归结为调整关键帧:

@-webkit-keyframes flash {
    0% { opacity: 1; } 
    2% { opacity: 0; }
    3% { opacity: 0.6; }
    4% { opacity: 0.2; }
    6% { opacity: 0.9; } 
    100% { opacity: 1; }
}
@keyframes flash {
    0% { opacity: 1; } 
    2% { opacity: 0; }
    3% { opacity: 0.6; }
    4% { opacity: 0.2; }
    6% { opacity: .9; } 
    100% { opacity: 1; }
}

如果您可以设置 jsFiddle，将来通常会更容易获得有用的答案你的问题。

我创建了一个 jsFiddle here 使用修改后的关键帧和不同的图像，因为我无权访问您的图像。