注册CSS自定义属性支持CSS渐变动画实例页面

展示

代码

• HTML：

  <h4>默认的</h4>
  <canvas class="default"></canvas>
  
  <h4>自定义属性注册过的</h4>
  <canvas class="registered"></canvas>

• CSS：

  .default {
      --start-color: deepskyblue;
      --end-color: deeppink;
      background: linear-gradient(var(--start-color), var(--end-color));
      transition: --start-color .5s, --end-color .5s;
  }
  .default:hover,
  .default:active {
      --end-color: deepskyblue;
      --start-color: deeppink;
  }
  
  @property --start-color-register {
      syntax: '<color>';
      inherits: false;
      initial-value: #000000;
  }
  @property --end-color-register {
      syntax: '<color>';
      inherits: false;
      initial-value: #000000;
  }
  
  .registered {
      --start-color-register: deepskyblue;
      --end-color-register: deeppink;
      background: linear-gradient(var(--start-color-register), var(--end-color-register));
      transition: --start-color-register .5s, --end-color-register .5s;
  }
  .registered:hover,
  .registered:active {    
      --start-color-register: deeppink;
      --end-color-register: deepskyblue;
  }

• 亦可以使用如下JS：

  if (window.CSS) {
      CSS.registerProperty({
          name: '--start-color-register',
          syntax: '<color>',
          inherits: false,
          initialValue: 'black'
      });
      CSS.registerProperty({
          name: '--end-color-register',
          syntax: '<color>',
          inherits: false,
          initialValue: 'black'
      });
  }