我想创建一个元素,使用 position: absolute 覆盖页面的一部分。该元素将是 50% 不透明的,并在红色和透明之间闪烁。有点像 OSX 使用(使用过?)来处理对话框的默认按钮。
如何使用 CSS3 创建一个无限循环的动画?
如何在这个循环中在两种背景颜色之间循环?
目前哪些浏览器可以通过 CSS3 动画支持?
jQuery 动画是一种替代方法,但我想先尝试 CSS3 方法。
最佳答案
前 2 个问题由 spec 回答.
要循环:animation-iteration-count: infinite;
循环背景颜色涉及指定 @keyframes
规则。
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;
}
(不要忘记任何适用的供应商前缀!)
就浏览器支持而言,我无法告诉您具体细节,但无论如何我建议通过 modernizr 进行功能检测。和一个 javascript 回退。
这是一个 example在 webkit 中工作并至少满足您的一些要求。注意:我不使用 Mac,所以我不确定您提到的效果的具体细节。
关于html - CSS3 动画 : blinking overlay box,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6390639/