CSS3动画:闪烁覆盖框

前端之家收集整理的这篇文章主要介绍了CSS3动画:闪烁覆盖框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想使用position:absolute创建一个覆盖页面一部分的元素.这个元素是50%不透明的,并且在红色和透明之间闪烁.有点像OSX使用(使用?)来执行对话框的默认按钮.

如何使用CSS3创建无限动画循环?

如何在此循环中在两种背景颜色之间循环?

今天通过CSS3动画可以支持哪些浏览器?

jQuery动画是另一种选择,但我想首先尝试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,所以我不确定你引用的效果的细节.

原文链接:https://www.f2er.com/css/215326.html

猜你在找的CSS相关文章