radiobox_使用Radiobox.css创建有趣的动画单选按钮

默认HTML5单选按钮很无聊。 有多种使用CSS3 对其进行自定义的方法，但是大多数技术仅关注外观 。

该库是完全免费和开源的 ，可以在GitHub上下载。 使用此CSS库，您可以从超过12种应用于单选按钮的动画中进行选择。

没有自定义CSS样式，它们仍然看起来像普通的单选输入 。 但是，当用户单击以选择按钮时，他们将获得疯狂的动画效果 。 您可以在Radiobox主页上看到实时示例 ， 该 示例在其名称旁边演示了每种样式。

您可以直接从npm或bower安装Radiobox，甚至可以将文件本地下载到您的计算机上。 如果您想在不下载任何内容的情况下玩转，GitHub 会将所有文件托管在CDN中 。

您唯一需要的文件是radiobox.min.css ，它应该直接进入文档头 。 从那里，您只需根据所需的动画向每个单选按钮添加一个简单的类 。

这是“ boing”效果的代码段 ：

<input type="radio" class="radiobox-boing">

请注意，“ boing”动画确实具有其自己CSS文件，名为boing.min.css 。 如果您打算在页面上使用该效果，则必须包括在内 。

下载Radiobox时，您应该获得一个包含所有这些效果的现场演示 的演示目录 。 您可以简单地将代码直接复制/粘贴到您的页面上，以使其正常工作。

有关完整文档 ，请查看主回购以及实时演示站点 。 如果您想与创建者联系，则可以从720kb网站发送电子邮件，也可以通过Twitter @ 720kb_发送消息。

翻译自: https://www.hongkiat.com/blog/animated-radio-buttons-radiobox-css/