CSS3动画：闪烁重叠框 [英] CSS3 animation: blinking overlay box

问题描述

我想使用position：absolute创建一个覆盖页面一部分的元素。这个元素将是50％不透明并且在红色和透明之间闪烁。

I'd like to create a element which overlays a part of a page using position: absolute. This element would be 50% opaque and blink between red and transparent. A bit like what OSX uses (used?) to do for the default button of a dialog.

如何使用CSS3创建一个无限的动画循环？

How to create a infinite animation loop with CSS3?

如何在这个循环中在两个背景颜色之间循环？

How to cycle between two background colours in this loop?

现在通过CSS3动画支持哪些浏览器？

Which browsers is possible support today through CSS3 animation?

jQuery动画是另一种选择，但我想先尝试CSS3方法。

jQuery animation is an alternative, but I'd like to try CSS3 approach first.

推荐答案

前2个问题由规范回答。

To loop： animation-iteration-count：infinite;

循环背景颜色涉及指定 @keyframes 规则。

And cycling the background color involves specifying a @keyframes rule.

body { background: #0ff; }

@-webkit-keyframes blink {
    0% { background: rgba(255,0,0,0.5); }
    50% { background: rgba(255,0,0,0); }
    100% { background: rgba(255,0,0,0.5); }
}

@keyframes blink {
    0% { background: rgba(255,0,0,0.5); }
    50% { background: rgba(255,0,0,0); }
    100% { background: rgba(255,0,0,0.5); }
}

#animate { 
    height: 100px; 
    width: 100px;
    background: rgba(255,0,0,1);
}

#animate {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease;   

    animation-direction: normal;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-name: blink;
    animation-timing-function: ease;       
}

（不要忘记任何适用的供应商前置！）

(don't forget any applicable vendor prefixes!)

至于浏览器支持，我不能告诉你具体细节，但在任何情况下，我会建议功能检测通过 modernizr 和一个javascript后备。

As far as browser support goes, i couldn't tell you specifics, but in any case i would recommend feature detect via modernizr and a javascript fallback.

这里是示例，它在webkit中工作，并且至少满足您的一些要求。注意：我不使用mac，所以我不确定你引用的效果的细节。

Here is an example that works in webkit and fulfills at least some of your requirements. NOTE: I don't use a mac so i wasn't sure the specifics of the effect you referenced.

这篇关于CSS3动画：闪烁重叠框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！