假设我有一个 div
,其中添加了 background-color:red or green
的颜色。我想让这个闪光变成另一种颜色,其中“非闪光”是以前的颜色值。
HTML
<div class='red make-green flash'></div>
LESS
.red{
background-color:red;
.make-green{
background-color:green;
}
}
.flash{
animation: flash 2s infinite;
}
@keyframes flash {
0%{
background-color:blue;
}
50%{
background-color: ;<-- what goes here?
}
100%{
background-color:blue;
}
}
如果我们删除 .make-green
,div
应该闪烁 red |蓝色
,使用make-green
它会闪烁绿色|蓝色
。
最佳答案
如果您同意non-perfect browser support,您可以使用css变量。 .
:root {
--bg: red;
}
.red {
height: 100px;
width: 100px;
background-color: var(--bg);
}
.make-green {
--bg: green;
}
.flash {
animation: color 2s infinite;
}
@keyframes color {
0% {
background-color: blue;
}
50% {
background-color: var(--bg);
}
100% {
background-color: blue;
}
}
<div class='red make-green flash'></div>
<div class='red flash'></div>
关于html - Flash CSS 颜色在先前颜色和新颜色之间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55380983/