特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
CSS自定义属性又称为CSS的变量或者原生变量。其和CSS处理器里的变量还是略有不同,但这篇文章我们要聊的并不是这个东东,咱们想聊聊CSS自定义属性怎么制作动画。
在继续之前,咱们都知道现在制作Web动画一般是通过CSS的Animation或者Web Animation API来完成(也就是JavaScript制作动画)。但有了CSS自定义属性之后,配合简单的几行JavaScript代码,也可以实现一些动画效果。那么CSS自定义属性是如何制作动画呢?
如果你感兴趣的,请继续...
CSS自定义属性
CSS自定义属性最早称之为CSS变量,更官方一点的称谓是CSS自定义属性级联变量。
官方对CSS变量是这样描述的:
变量,是标识符和可以用任何常规值替代值之间的关联,使用
var()
函数表示法:var(- example-variable)
返回--example-variable
的值 。
对CSS自定义属性是这样描述的:
自定义属性,这是表单的特殊属性
--*
这里*
表示变量名称。这些用于定义给定变量的值:--example-variable:20px;
是一个CSS声明,使用自定义--*
属性将CSS变量--example-variable
的值设置为20px
。
CSS自定义属性的使用方法
为了能更好的理解后面的内容,先简单的回忆一下CSS自定义属性的使用方法。
可以像下面那样先声明一个变量:
:root {
--primary-color: green;
}
然后在需要使用的地方通过var()
函数来调用:
body {
background-color: var(--primary-color);
}
这个时候body
的背景颜色是green
。如果你想让body
背景颜色变成gray
时,你只需要修改--primary-color
。看上去是不是像CSS处理器中变量的使用方法。
是不是很简单,如果你觉得就这点内容不够深入,可以阅读早前译的一篇文
如需转载,烦请注明出处:https://www.w3cplus.com/css3/create-animation-with-css-variables.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!