houdiniCss 的使用

---

介绍

houdini 允许我们自定义css 属性

🎏 使用场景

比如实现一个 渐变动态效果，循环旋转， 然而正常的css 中不支持动态的 deg值， 也不支持变量动画的变化

  	@property --direc {
        /* 用来定义变量 */
        syntax: '<angle>'; /* 语法 */
        initial-value: 0deg; /* 初始值 */
        inherits: false; /* 是否继承 */
      }

      .card {
        /* 变量 */
        /* --direc: 0deg; */
        color: red;
        background: linear-gradient(var(--direc), #f3ec78, #af4261 43%, #4e00c2);
        border-radius: 10px;
        animation: rotate 3s linear infinite;
        width: 200px;
        height: 200px;
        margin: 50px auto;
      }
      @keyframes rotate {
        /* //动画要生效必须满足两个条件， 值必须是数字， 和是属性 */
        to {
          /* background-image: linear-gradient(45deg, #f3ec78, #af4261); */
          --direc: 360deg;
        }
      }