CSS 渐变背景过渡的2种方式

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 来实现渐变色的过渡动效。

兼容性方面，由于这是一个实验中的功能，所以部分浏览器需要加私有前缀。

具体语法如下：

@property --property-name {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

syntax 的值可以为以下这这些，网上常见的是使用 length、number、color、percentage 这几个作为 Demo的。

1. length
2. number
3. percentage
4. length-percentage
5. color
6. image
7. url
8. integer
9. angle
10. time
11. resolution
12. transform-list
13. transform-function
14. 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