Flash CSS颜色介于先前的颜色和新的颜色之间 [英] Flash CSS colour between previous colour and new colour

问题描述

假设我有一个div，其颜色加上了background-color:red or green.我想使这种闪光成为另一种颜色，其中非闪光"是先前的颜色值.

Suppose I have a div with a colour added with background-color:red or green. I want to make this flash another colour, where the 'non-flash' is the previous colour value.

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 | blue，而make-green它将闪烁green | blue.

If we remove .make-green the div should flash red | blue, with the make-green it would flash green | blue.

推荐答案

如果可以使用浏览器支持不完美.

: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>

这篇关于Flash CSS颜色介于先前的颜色和新的颜色之间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！