CSS 变量、input[type="color"] 和表单动画

我本来想不分享这个，因为我觉得“嗯，这很简单，任何人都可以做到”，但后来我提醒自己，“简单”这个词是非常相对的，在我的生活中曾经有一段时间，这会让我

（对于那些犹豫是否要写博客文章的人来说，这是一件值得思考的好事情！仅仅因为你认为“每个人都知道这些东西”并不意味着它是真的。很多人并不知道这些东西。）

反正我当时只是想试试复选框/单选按钮的动画，结果玩得有点过瘾，就加了一些自定义功能。效果如下：

复选框“x”动画使用 CSS 渐变来实现复选框 x 的逐渐“增长”/“填充”
x 元素本身是::before按::after一定角度旋转的伪元素，因此它们形成对角线，相互交叉。
单选按钮使用“缩放”过渡动画来使圆圈增大/缩小
<input type="color">就是如何获得颜色选择器输入
CSS 自定义属性（变量）可让用户轻松选择颜色。
我发现了这个小型颜色处理库，这样当有人选择一种颜色后，我就可以找到更亮/更暗的版本。
🐛 Safari 的一点小问题在于，当你更改强调色时，它似乎无法正确更新已勾选的渐变动画项目，所以你不得不取消勾选并重新勾选。Chrome/Firefox 似乎可以正确更新。

当然，您可以查看源代码来了解所有细节 🙂