重置背景颜色CSS

我开发我在哪里应该使DIV闪光的一个特定部分（或闪烁一次）项目重置背景颜色CSS

的HTML：

<p style="color:#f47321; font-size:16px; font-weight:bold;" id="divtoBlink" >Current Price</p>

和CSS

<style> 
    #divtoBlink{ 
    background: #008800; 
    animation-duration: 1000ms; 
    animation-name: blink; 
    animation-iteration-count: 1; 
    animation-direction: alternate;  
    } 

    @keyframes blink { 
    from { 
     opacity: 1; 
    } 

    to { 
     opacity: 0; 
    } 
    } 
</style>

它闪烁，并将颜色更改为绿色。但颜色保持绿色。我想将background: #008800;重置为白色或透明。有没有可用的财产或调整？任何帮助表示赞赏。

来源

2015-10-05 Faizan Shah

为什么不使用jQuery的？ –

@MuhammadFarrukhFaizy：因为可以在不使用jQuery的情况下处理这些事情。 – Harry

@MuhammadFarrukhFaizy为什么不使用汇编程序？是的，因为使用Asembler完成这样的任务非常复杂。或者是一种脚本语言。一个完整的应用程序框架（如jQuery）... – feeela

我认为你所需要的仅仅是在眨眼后background变为透明并且文本保持可见。如果是这种情况，请使用下面的代码片段。当opacity从1变为0时，整个元素及其内容将变为不可见。相反，动画只需background应该就足够了。

#divtoBlink { 
 
    background: #008800; 
 
    animation-duration: 1000ms; 
 
    animation-name: blink; 
 
    animation-iteration-count: 1; 
 
    animation-direction: alternate; 
 
    animation-fill-mode: forwards; 
 
} 
 
@keyframes blink { 
 
    from { 
 
    background: #008800; 
 
    } 
 
    to { 
 
    background: transparent; 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<p style="color:#f47321; font-size:16px; font-weight:bold;" id="divtoBlink">Current Price</p>

原来的答案：

所有这一切需要是添加animation-fill-mode: forwards使得元件保持的状态作为在其最后关键帧（其为opacity: 0或透明）。目前，一旦动画完成，动画元素将恢复到其原始状态（background: #008800）。

#divtoBlink { 
 
    background: #008800; 
 
    animation-duration: 1000ms; 
 
    animation-name: blink; 
 
    animation-iteration-count: 1; 
 
    animation-direction: alternate; 
 
    animation-fill-mode: forwards; 
 
} 
 
@keyframes blink { 
 
    from { 
 
    opacity: 1; 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<p style="color:#f47321; font-size:16px; font-weight:bold;" id="divtoBlink">Current Price</p>

来源

2015-10-05 12:04:15 Harry

嗯，闪烁后，它淡化了div标签内的所有内容。 –

@FaizanShah：是的，这不是你想要的吗？如果没有，请你澄清更多。（*编辑：*我认为你可能只是在寻找背景变得透明，但内容是可见的。如果是的话，请现在回答我的答案中的第一个片段。） – Harry

你看这是一个应该说的标签当前价格。应用css，颜色变为绿色，但保持绿色。应用你的方法，它消除了绿色和当前价格。 –

我想在你的情况很容易改变的格局。

初始颜色为白色，然后让它闪烁为绿色并再次重置为您希望的颜色（白色或透明）。通过自定义关键帧轻松解决。（看小提琴）

#divtoBlink{ 
    background: #fff; 
    animation-duration: 1000ms; 
    animation-name: blink; 
    animation-iteration-count: 1; 
    animation-direction: alternate;  
    } 

    @keyframes blink { 
    0% { background: #008800;} 
    50% { background: #fff;} // optional sugar any color between.. 
    100% { background: #fff; } 
    }

http://jsfiddle.net/a2pg246h/

来源

2015-10-05 12:14:46

重置背景颜色CSS

回答

相关问题