Fatal编程技术网
  • html/
  • Html 在以前的颜色和新颜色之间闪烁CSS颜色

Html 在以前的颜色和新颜色之间闪烁CSS颜色

html css less

Html 在以前的颜色和新颜色之间闪烁CSS颜色,html,css,less,Html,Css,Less,假设我有一个div，加上背景色：红色或绿色。我想让这个闪光变成另一种颜色，其中“非闪光”是以前的颜色值 HTML <div class='red make-green flash'></div> LESS .red{ background-color:red; .make-green{ background-color:green; } } .flash{ animation: flash 2s infinite; } @keyframes f

假设我有一个
div
，加上
背景色：红色或绿色
。我想让这个闪光变成另一种颜色，其中“非闪光”是以前的颜色值

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;
 }
}

HTML
较少的
瑞德先生{
背景色：红色；
.变绿{
背景颜色：绿色；
}
}
.闪光{
动画：flash 2s无限；
}
@关键帧闪烁{
0%{
背景颜色：蓝色；
}
50%{

背景色：；如果您不介意的话，可以使用css变量



：根目录{
--背景：红色；
}
瑞德先生{
高度：100px；
宽度：100px；
背景色：var（--bg）；
}
.变绿{
--背景：绿色；
}
.闪光{
动画：色彩无限；
}
@关键帧颜色{
0% {
背景颜色：蓝色；
}
50% {
背景色：var（--bg）；
}
100% {
背景颜色：蓝色；
}
}




这里没有CSS变量的另一种想法，你可以稍微改变动画来考虑元素的初始状态。在不指定<代码> 100% < /C>状态的情况下，浏览器将自动考虑元素内指定的值。



.red{
背景色：红色；
}
.变绿{
背景颜色：绿色；
}
.闪光{
动画：闪现1s无限交替；
}
@关键帧闪烁{
0% {
背景颜色：蓝色；
}
}


一些文本

一些文本
常见的颜色是蓝色，因此我建议使用蓝色作为基本背景色。我可以看出这在这种特定情况下是有效的；如果它更通用呢？