checkbox复选框样式_使用Checkbox.css设置自己的复选框动画效果的样式

在最近的文章中，我介绍了一个有趣的动画库，用于由CSS驱动的 自定义单选按钮 。

该免费库以720kb的速度发布，并很快出现了一个名为Checkbox.css的后续替代方案 。 除了重新设置样式和设置HTML复选框的动画效果之外，此方法的工作方式相似。

该库是一组具有三个不同目的的库：

1. Radiobox.css –自定义广播动画
2. Checkbox.css –自定义复选框动画
3. Checked.css –设置样式和设置现有选定元素的动画（单选框和复选框）

这些都是由同一团队开发的，它们的工作方式相似。 但是，如果要获得完整的效果，则需要单独包含每个库 。

快看一下Checkbox.css GitHub ，看看其中的一些功能以及它们的工作方式。 默认情况下，它们依赖于2D转换以及CSS转换 ，具体取决于浏览器的支持。

这些库都没有JS后备方法 ，因此它们实际上仅适用于CSS驱动的动画 。 但是，快速浏览一下演示页面应该会让您高兴地将这些动画添加到页面中。

这个过程再简单不过了，它几乎需要或几乎不需要编码知识 （尽管拥有一些知识 总是有用的 ）。

将CSS样式表显示在页面上后，只需将格式为checkbox-x的类添加到您的复选框，其中“ x”表示您想要的任何动画 。 例如，以下是“跳转”动画效果的代码：

<input type="checkbox" name="mycheckbox" id="checkid"
        class="checkbox-jump">

最好的部分是该库如何与单选按钮格式结合使用 。 如果要设置现有选定元素的动画，绝对可以推荐Checked.css库 。

不要让所有这些依赖关系吓scar您。 几乎任何人都可以设置Checkbox.css库或任何相关库， 全部都从头开始，只需进行一些复制和粘贴即可 。

而且，如果您对此输入动画库包有疑问或建议，请尝试通过其网站或Twitter @ 720kb_向创建者发送消息。

翻译自: https://www.hongkiat.com/blog/checkbox-css-custom-styles/