闪电效果CSS [英] Lightning Effect CSS

问题描述

编辑：
我基本上试图实现这个网页演示的结果。
http://codepen.io/Chrislion_me/pen/rVqwbO

我对于整个HTML / CSS世界很新。
我想为uni的项目做一个主页，创建一个主页，其中有一个闪电风暴的图片在背景中，覆盖了太多的过滤掉了一些图片当前网站的图片。

基本上，照片必须保持固定的位置，所以如果我向下滚动页面，它不会这样[固定闪电风暴] [2]。

这是工作完全正常，问题是，我不能让我的雷暴风暴正常工作，风暴意味着每隔〜8秒闪烁几次。

根据我使用代码的方式，它通常只是白色，然后每隔〜8秒闪烁图像，然后再次变白。
我不知道在哪里我错了，我已经发布了我的代码下面，如果这有帮助 - 它只是一个主机的图像和按钮，我可以发布更多的CSS如果需要。 / p>

提前感谢！ ：）

HTML

 < div id =bg class =banner flashit> 
< p> TEST TEXT< / p> 
< ul class =actions> 
< li>< a href =＃class =button special big>点击此处< / 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; 
动画：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 {
从{opacity：0; } 
 92％{opacity：0; } 
 93％{opacity：0.6; } 
 94％{opacity：0.2; } 
 96％{opacity：1; } 
 to {opacity：0; } 
} 
  

解决方案

与动画的CSS有关的问题。

在关键帧中，如果您使用从{} 和到{ } 这些与start和end相同。您不能也使用之间的百分比。从和到是所有你可以使用当去那条路线。从{} 和到 c <>使用时，不能有中间步骤。

如果要对关键帧使用百分比，则所有步骤都必须是百分比。因此，不使用 from（），请使用 0％，而不是 / code>，使用 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此处 包含修改的关键帧和不同的图片，因为我没有有权访问您的图片。

EDIT: I'm basically trying to achieve the result that this web page demonstrates. http://codepen.io/Chrislion_me/pen/rVqwbO

I'm pretty new to the whole HTML / CSS world. What I'm trying to do for a project at uni, is create a home page where there's a picture of a lightning storm in the background, covered by a overlay which is too filter out some of the picture Picture of current website.

Basically, the photo has to remain fixed where it is, so if I scrolled further down the page it doesn't move as such [Stationary Lightning Storm][2].

So this is working perfectly fine, problem is, I can't get my lightning storm to work correctly, the storm is meant to flash a couple of times every ~ 8 seconds-ish.

Depending on the way I play with the code, it usually just goes white and then every ~ 8 seconds it flashes the image and then goes white again. I'm not sure where I'm going wrong, I've posted part of my code below if that helps - it's just section that hosts the image and the buttons, I can post more CSS if that's needed.

Thanks in advance! :)

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

解决方案

There are a couple of issues with your CSS for the animation. Specifically the keyframes.

In keyframes, if you use from{} and to{} these are the same as "start" and "end". You can't also use percentages in between. From and to are all you can use when going that route. There can be no "middle" steps when using from{} and to{}.

If you want to use percentages for keyframes, all steps need to be a percentage. So rather than using from(), use 0% and instead of to{}, use 100%.

On top of this, since you had all the percentages set to the 90% range and the animation is 10 seconds long, starting from 0% opacity, there was a period of about 11 seconds (2 second delay, then 9 seconds of the animation) where the image is just transparent and it appears as though nothing's there. Changing the percentages to start the flashing at the beginning of the animation then ending on an opaque image helps this considerably.

Ultimately alterations merely came down to tweaking the keyframes:

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

In the future it's often easier to get helpful answers if you can set up a jsFiddle of your issue.

I've created a jsFiddle here with the modified keyframes, and different images since I don't have access to your images.

这篇关于闪电效果CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！