Question

下面的CSS会将淡入淡出从一种颜色变为另一种颜色并再次返回。

@keyframes example {
    0%   {background-color:#cce0ff;}
    25%  {background-color:#66a3ff;}
    50%  {background-color:#cce0ff;}
    75%  {background-color:#66a3ff;}
    100% {background-color:#cce0ff;}
}

假设这是通过交叉渐变来实现的，有没有办法从过程中检索数字？

例如：在动画的25％阶段，我可以使用浮动.25并在另一个函数中使用它吗？

我试图让我的页面上的音乐音量随着颜色逐渐消失而膨胀和下降。

Answer 1

虽然您无法“提取”CSS属性，但由于CSS variables的魔力，您可以获得所需的相同结果！实质上，您可以设置一个变量，该变量将保留相同的值，以便在两个声明中使用。

首先，您需要设置要在两个声明中使用的变量：

:root {
--one: 0%;
--two: 25%;
--three: 50%;
--four: 75%;
--five: 100%;
}

然后简单地在您希望使用它们的声明中引用这些变量：

@keyframes example {
  var(--one)   {background-color:#cce0ff;}
  var(--two)   {background-color:#66a3ff;}
  var(--three) {background-color:#cce0ff;}
  var(--four)  {background-color:#66a3ff;}
  var(--five)  {background-color:#cce0ff;}
}

[Another Declaration] {
  volume: var(--two);
}

这会在第二个声明中将音量设置为25％，同时在25％关键帧处设置#66a3ff的背景颜色。

希望这有帮助！：）

我可以在CSS中从@keyframes获取数字吗？

1 个答案: