@property与渐变背景过渡动画效果实例页面

效果：

hover下面图形

代码：

CSS代码：

@property --end-color {
  syntax: "<color>";
  inherits: false;
  initial-value: black;
}
canvas {
  background: linear-gradient(skyblue, var(--end-color));
  transition: --end-color .2s;
}
canvas:hover {
  --end-color: pink;
}

HTML代码：

<canvas></canvas>