🌈彩虹Button

今天看codepen看到一款流光card，恰巧昨天学习swiftui时候也看到一款彩虹按钮。于是我：

非常值得讲的是 css property@property - CSS：层叠样式表 | MDN (mozilla.org)，或许用的人不多，但是对于动画确实是很好的帮助是强大的CSS Houdini Api[(Houdini API - Web API | MDN (mozilla.org))的一部分。

// 使用css定义
// 要定义在全局
@property --rotate {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

// 使用js定义
window.CSS.registerProperty({
  name: "--rotate",
  syntax: "<angle>",
  initalValue: 0deg,
  inherits: false
});

这样我们只要配合 animation的@keyframes @keyframes - CSS：层叠样式表 | MDN (mozilla.org)

@keyframes rotate {
   from { --rotate : 0deg }
   to { --rotate : 360deg }
}

就可以很轻松的转起来了

快去试一下吧！😊