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

如果让你实现视频中的渐变色,你会想到用什么方式呢?

最开始我想到的方式是通过切换 css 变量来实现,下面是直接通过切换 background 来实现的,本质上是同一种思路。

但不巧的是渐变色不支持这种直接替换“变量”的方式,于是我想到了一种比较 Hack 的方法,需要费一点 DOM 节点,实现方式如下:

通过 JS 切换不同 DIVClass 来实现渐变色的切换,✅优点是没有兼容性问题,没啥学习成本和心智负担,通过简单的定位和布局即可实现,在移动端中可用,❌缺点是不够雅观,像一层牛皮藓,也不够现代化,毕竟 CSS 经过这两年的发展已经有很多方便的实现了,因此我尝试学习了一种新方法。

利用 CSS @property 来实现渐变色的过渡动效。

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

具体语法如下:

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

syntax 的值可以为以下这这些,网上常见的是使用 lengthnumbercolorpercentage 这几个作为 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