By Noxxxx from https://www.noxxxx.com/?post_type=post&p=2136 欢迎分享与聚合，尊重版权，可以联系授权
如果让你实现视频中的渐变色，你会想到用什么方式呢？
最开始我想到的方式是通过切换 css 变量来实现，下面是直接通过切换 background 来实现的，本质上是同一种思路。
See the Pen <a href="https://codepen.io/hjoker/pen/rNradBY"> Generate New Random Hex Color with JavaScript</a> by hjoker (<a href="https://codepen.io/hjoker">@hjoker</a>) on <a href="https://codepen.io">CodePen</a>.
但不巧的是渐变色不支持这种直接替换“变量”的方式，于是我想到了一种比较 Hack 的方法，需要费一点 DOM 节点，实现方式如下：
See the Pen <a href="https://codepen.io/hjoker/pen/xxzMPJQ"> Untitled</a> by hjoker (<a href="https://codepen.io/hjoker">@hjoker</a>) on <a href="https://codepen.io">CodePen</a>.
通过 JS 切换不同 DIV 的 Class 来实现渐变色的切换，✅优点是没有兼容性问题，没啥学习成本和心智负担，通过简单的定位和布局即可实现，在移动端中可用，❌缺点是不够雅观，像一层牛皮藓，也不够现代化，毕竟 CSS 经过这两年的发展已经有很多方便的实现了，因此我尝试学习了一种新方法。
利用 CSS @property 来实现渐变色的过渡动效。
兼容性方面，由于这是一个实验中的功能，所以部分浏览器需要加私有前缀。
具体语法如下：
代码语言：javascript复制@property --property-name {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}syntax 的值可以为以下这这些，网上常见的是使用 length、number、color、percentage 这几个作为 Demo的。
- length
- number
- percentage
- length-percentage
- color
- image
- url
- integer
- angle
- time
- resolution
- transform-list
- transform-function
- custom-ident (a custom identifier string)
@property 规则提供了一个直接在样式表中注册自定义属性的方式，而无需运行任何 JS 代码，从而扩展了原先那些不支持的样式效果写法，其实这算是一种精细化的表现方式，让开发者自定义变量，来控制像渐变这种多 value 值混合的写法，把原本浏览器的默认（黑盒）行为，变为代码可控。
看一下我的这个例子，通过自定义起始和终止两个颜色变量，以及角度，来实现渐变色的动态切换。
See the Pen Untitled by hjoker (@hjoker) on CodePen.
参考链接： https://web.dev/at-property/ https://developer.mozilla.org/zh-CN/docs/Web/CSS/@property
