假设我有一个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
the div
应该闪烁red | blue
,与make-green
它会闪烁green | blue
.
如果你同意的话,你可以使用 css 变量不完美的浏览器支持 https://caniuse.com/#search=css%20variables.
: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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)