html边框闪烁代码,CSS3动画：闪烁覆盖框

前两个问题由

spec回答.

循环：animation-iteration-count：无限;

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

body { background: #0ff; }

@-webkit-keyframes blink {

0% { background: rgba(255,0.5); }

50% { background: rgba(255,0); }

100% { background: rgba(255,0.5); }

}

@keyframes blink {

0% { background: rgba(255,0.5); }

}

#animate {

height: 100px;

width: 100px;

background: rgba(255,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后备功能检测.

这是一个在webkit中工作的example,至少满足您的一些要求.注意：我不使用mac,所以我不确定你引用的效果的细节.