自定义css属性(实现一个渐变色背景动画)

前言

有时候我们想只用 css 做一些比较好看的动画效果，例如：一个旋转的渐变色，调整过渡色的效果等，发现单纯的 css 根本做不了，必须要 js 协作才行

实则不然，还存在 css 自定义属性 可以完成这些动画变换

先写一个默认动画

我们先写一个简单的 width 起始动画，width 从 300px -> 600px 动画很简单就实现了，动画次数设置成最大

.card {
  width: 300px;
  height: 600px;
  animation: rotate 3s linear infinite;
  background-color: red;
}

@keyframes rotate {
  to {
    width: 600px;
  }
}

改成过渡色动画

然后我们改动一下，改成一个过渡色动画，我们希望他的角度循环变化，改动角度发现并没有发生变化

.card {
  width: 300px;
  height: 600px;
  background-image: linear-gradient(0deg, #5ddcff, #3c67e3 43%, #4e00c2);
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  to {
    background-image: linear-gradient(360deg, #5ddcff, #3c67e3 43%, #4e00c2);
  }
}

改成css变量

有人可能会说，这样不行，使用 css 变量呢，发现也是不行，css 变量跟直接写结果没啥区别，更适合配合js代码完成效果

.card {
  --circ: 0deg;
  width: 300px;
  height: 600px;
  background-image: linear-gradient(var(--circ), #5ddcff, #3c67e3 43%, #4e00c2);
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  to {
    --circ: 360deg;
    //下面注释掉，将 --circ 当成属性设置，也是不行
    background-image: linear-gradient(var(--circ), #5ddcff, #3c67e3 43%, #4e00c2);
  }
}

下面就需要用到 css 自定义属性了

自定义属性

就算上面使用了 css 变量也没有用，动画只有更改 css 属性才能够生效，因此我们只需要自定义一个属性，让其代替 css 变量，不就可以实现动画效果了，那我们就来试试

我们自定义一个叫 --circ 的属性，让其当做我们的 css 属性，其中使用了 @property

ps：@property CSS at-rule 是 CSS Houdini API 的一部分，它允许开发者显式地自定义 CSS属性, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承，参考这里

@property --circ {
  syntax: "<angle>"; //也可以类似于 <color> 之类的类型
  initial-value: 0deg;
  inherits: false;
}

然后像 css 变量一样使用到 linear-gradient 中

.card {
  --circ: 0deg;
  width: 300px;
  height: 600px;
  background-image: linear-gradient(var(--circ), #5ddcff, #3c67e3 43%, #4e00c2);
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  to {
    //由于本身已经是自定义属性了，所以只需要改动这个属性就可以形成 css 动画了
    --circ: 360deg;
  }
}

这样就实现了一个 旋转的渐变色背景动画 效果了, 如果中间再覆盖一个盒子，那么就会有一个旋转渐变色效果了（下面没做动画，确实旋转了，本人懒，这里就不做动画了😂）