重置背景颜色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;
重置为白色或透明。有没有可用的财产或调整?任何帮助表示赞赏。
我认为你所需要的仅仅是在眨眼后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>
嗯,闪烁后,它淡化了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; }
}
为什么不使用jQuery的? –
@MuhammadFarrukhFaizy:因为可以在不使用jQuery的情况下处理这些事情。 – Harry
@MuhammadFarrukhFaizy为什么不使用汇编程序?是的,因为使用Asembler完成这样的任务非常复杂。或者是一种脚本语言。一个完整的应用程序框架(如jQuery)... – feeela