css 变量_如何将CSS变量用于动画

css 变量

当我们在讨论中提到CSS时，我们通常将其称为愚蠢的语言。 一种声明性语言，缺乏逻辑和洞察力； 但这不是真实的现实。 多年来，开发人员一直渴望标准CSS中的变量，长期以来一直被诸如LESS和Sass之类的预处理器所破坏。 CSS变量不仅是开发人员的实际选择，而且还可以在动画场景中使用。 还在怀疑吗？ 继续了解更多！

可变基础

CSS变量是用于在样式表中重用的存储值。 使用自定义var()函数可以访问它们，并使用自定义属性符号进行设置。

:root {
  --main-color: goldenrod;
}

div {
  background-color: var(--main-color);
}

:root内定义的变量是全局变量，而选择器内定义的变量特定于该选择器。

div {
  --module-color: goldenrod;
  background-color: var(--module-color);
}

在上面的示例中，任何div都将接受该变量，但是我们可以使用诸如class和id class定位方法来命名更具体。

var()函数也可以接受后备值。

.nav {
    background: var(--navbg, blue);
}

这在尚未定义变量或使用自定义元素和Shadow DOM的情况下很有用。

CSS变量还没有为黄金时间做好准备，但是随着许多领先的浏览器已经实现该规范 ，对未来的展望非常光明。 可以毫无疑问地使用它们只是时间问题，而且时间越来越快。

动画变量

有许多将CSS变量与动画结合在一起的选项。 考虑一下上下文，例如音频可视化，JavaScr