9款超炫的复选框效果，你见过吗？

复选框（Checkbox）在各个浏览器中的效果不一致，因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。

今天就给大家分享9款超炫的复选框（Checkbox）效果，纯 CSS3 实现，未使用任何图片。

温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

▲9款超炫的复选框（Checkbox）效果

前面三款效果都是灵感来自移动应用程序的滑动选择框效果，在选择和未选择状态之间通过滑动来切换效果，非常的动感。效果的实现方面是借用了一个 DIV 标签和一个 Label 标签，下面是效果一的 HTML 代码示例：

为了实现圆角和复选框的立体感效果，这里运用了CSS3的圆角（border-radius）、盒阴影（box-shadow）、渐变（linear-gradient）以及 CSS3 动画技术。下面是效果一的 CSS 代码示例：

后面六款效果的交互是我们常见的，使用CSS3对浏览器默认的复选框效果进行了美化，并且在各个浏览器中表现一致。HTML 代码都是类似的，这里例举效果五的代码：

CSS 代码如下：

最后，想要此效果的源码，请各位自行到百度网盘下载获取。

源码下载地址：

链接: https://pan.baidu.com/s/1EG3cLk63FCWVAKwKzv0ISw

密码: cjhn