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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180717B0C86O00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券