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

下面的CSS动画从一种颜色渐变到另一种颜色，然后再回来。我可以在CSS中使用@keyframes获取数字吗？

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

假设这是通过交叉衰落工作，有什么办法从过程中检索数字？

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

我试图让我的页面上的音乐的音量随着颜色淡入和淡出而膨胀和下降。

来源

2017-03-17 Alex

不是我所知道的。你可以使用＃来通过'content'属性填充内容，并且在页面上显示或者用javascript或其他东西来做任何你想做的事情。 http://codepen.io/anon/pen/LWOOQV –

虽然您不能'提取'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。

希望这会有所帮助！ :)

来源

2017-03-17 03:42:24

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

回答

相关问题